【百度地図API】商圏地図をどのように作成しますか?行政地図?
要約:
ある領域を表示し、マウスを置くと、その領域が変色します.この場合、ポリゴンオーバーライドとマウスイベントを巧みに使用する必要があります.
どこへ行くネットの例を見てみましょう.http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16
---------------------------------------------------------------------------------------------
一、地図を作成する
ここでは衛星図を使用し、魚の骨コントロールを追加しました.
二、多角形を作成する
多角形の各点は、自分で設定する必要があります.
座標選択ツールを使用してポイントを探すことができます.http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
たとえば、北京の二環の多角形を作成します.
三、多角形にマウスイベントを追加する
1、mouseover
マウスをポリゴンに置くと、ポリゴンのエッジが赤くなります.
2、mouseout
したがって、マウスを移動すると、赤は元の青に戻ります.
3、click
多角形をクリックすると、地図が1レベル拡大されます.そして地図の中心点を設定します.
四、ラベルの作成
ここのラベルは2つあります.1つは小型のランドマークラベルです.
多角形の説明です.
図示:
2つ目はマウスを多角形に置き、表示される商圏説明ラベルです.
図示:
五、図示
では、この方法では、多くの商圏を追加することができます.
同じように、行政区域地図もこの方法で作ることができます.
本例の完成品図:
六、すべてのソースコード
ある領域を表示し、マウスを置くと、その領域が変色します.この場合、ポリゴンオーバーライドとマウスイベントを巧みに使用する必要があります.
どこへ行くネットの例を見てみましょう.http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16
---------------------------------------------------------------------------------------------
一、地図を作成する
ここでは衛星図を使用し、魚の骨コントロールを追加しました.
map = BMap.Map("container",{mapType: BMAP_HYBRID_MAP}); map.centerAndZoom( BMap.Point(116.404, 39.915),12); map.addControl( BMap.NavigationControl()); map.addControl( BMap.MapTypeControl()); map.setCurrentCity(" ");二、多角形を作成する
多角形の各点は、自分で設定する必要があります.
座標選択ツールを使用してポイントを探すことができます.http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
たとえば、北京の二環の多角形を作成します.
//
var secRingCenter = new BMap.Point(116.400244,39.931757);
var secRing = [new BMap.Point(116.362875,39.949459),new BMap.Point(116.378972,39.956539),new BMap.Point(116.438764,39.955654),new BMap.Point(116.440488,39.911836),new BMap.Point(116.365175,39.905637)];
//
var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//
map.addOverlay(secRingPolygon);三、多角形にマウスイベントを追加する
1、mouseover
マウスをポリゴンに置くと、ポリゴンのエッジが赤くなります.
secRingPolygon.addEventListener("mouseover",(){
secRingPolygon.setStrokeColor("red");
});2、mouseout
したがって、マウスを移動すると、赤は元の青に戻ります.
secRingPolygon.addEventListener("mouseout",(){
secRingPolygon.setStrokeColor("blue");
});3、click
多角形をクリックすると、地図が1レベル拡大されます.そして地図の中心点を設定します.
secRingPolygon.addEventListener("click",(){
map.zoomIn();
secRingPolygon.setStrokeColor("red");
map.setCenter(secRingCenter);
});四、ラベルの作成
ここのラベルは2つあります.1つは小型のランドマークラベルです.
多角形の説明です.
図示:
secRingLabel2 = BMap.Label(" ",{offset: BMap.Size(10,-20), position: secRingCenter});
secRingLabel2.setStyle({"padding": "2px"});
map.addOverlay(secRingLabel2);2つ目はマウスを多角形に置き、表示される商圏説明ラベルです.
図示:
secRingLabel = BMap.Label(" ， </br> 。 </br> 、 、 、 </br> 、 、 。",{offset: BMap.Size(-150,0), position: secRingCenter});
secRingLabel.setStyle({"padding": "10px","width": "140px","border": "1px solid #ccff00"});五、図示
では、この方法では、多くの商圏を追加することができます.
同じように、行政区域地図もこの方法で作ることができます.
本例の完成品図:
六、すべてのソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> </title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="z-index:9;width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP}); //
map.centerAndZoom(new BMap.Point(116.325218,39.977441),12); // , 。
map.addControl(new BMap.NavigationControl()); //
map.addControl(new BMap.MapTypeControl()); //
map.setCurrentCity(" "); // 3D
//
//
var secRingCenter = new BMap.Point(116.400244,39.931757);
var secRing = [new BMap.Point(116.362875,39.949459),new BMap.Point(116.378972,39.956539),new BMap.Point(116.438764,39.955654),new BMap.Point(116.440488,39.911836),new BMap.Point(116.365175,39.905637)];
//
var secRingPolygon = new BMap.Polygon(secRing, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//
map.addOverlay(secRingPolygon);
//
secRingPolygon.addEventListener("mouseover",function(){
secRingPolygon.setStrokeColor("red");
map.addOverlay(secRingLabel);
map.panTo(secRingCenter);
});
secRingPolygon.addEventListener("mouseout",function(){
secRingPolygon.setStrokeColor("blue");
map.removeOverlay(secRingLabel);
});
secRingPolygon.addEventListener("click",function(){
map.zoomIn();
secRingPolygon.setStrokeColor("red");
map.setCenter(secRingCenter);
});
//
var secRingLabel = new BMap.Label("<b> </b>， </br> 。 </br> 、 、 、 </br> 、 、 。",{offset: new BMap.Size(-150,0), position: secRingCenter});
secRingLabel.setStyle({"z-index":"999999", "padding": "10px","width": "140px","border": "1px solid #ccff00"});
var secRingLabel2 = new BMap.Label(" ",{offset: new BMap.Size(10,-30), position: secRingCenter});
secRingLabel2.setStyle({"line-height": "20px", "text-align": "center", "width": "80px", "height": "29px", "border": "none", "padding": "2px","background": "url(http://jixingjx.com/mapapi/ac.gif) no-repeat",});
map.addOverlay(secRingLabel2);
//
//
var haidianCenter = new BMap.Point(116.305958,39.969037);
var haidian = [new BMap.Point(116.352526,39.915599),new BMap.Point(116.278362,39.916485),new BMap.Point(116.252491,39.943042),new BMap.Point(116.234669,39.994358),new BMap.Point(116.281812,40.037239),new BMap.Point(116.281812,40.037239),new BMap.Point(116.386446,39.98684),new BMap.Point(116.389896,39.968263),new BMap.Point(116.336429,39.960299)];
//
var haidianPolygon = new BMap.Polygon(haidian, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});
//
map.addOverlay(haidianPolygon);
//
haidianPolygon.addEventListener("mouseover",function(){
haidianPolygon.setStrokeColor("red");
map.addOverlay(haidianLabel);
map.panTo(haidianCenter);
});
haidianPolygon.addEventListener("mouseout",function(){
haidianPolygon.setStrokeColor("blue");
map.removeOverlay(haidianLabel);
});
haidianPolygon.addEventListener("click",function(){
map.zoomIn();
haidianPolygon.setStrokeColor("red");
map.setCenter(haidianCenter);
});
//
var haidianLabel = new BMap.Label("<b> </b>， </br> 。 </br> 80% </br>。 、 </br> 。",{offset: new BMap.Size(-150,0), position: haidianCenter});
haidianLabel.setStyle({"z-index":"999999", "padding": "10px","width": "140px","border": "1px solid #ccff00"});
var haidianLabel2 = new BMap.Label(" ",{offset: new BMap.Size(10,-30), position: haidianCenter});
haidianLabel2.setStyle({"line-height": "20px", "text-align": "center", "width": "80px", "height": "29px", "border": "none", "padding": "2px","background": "url(http://jixingjx.com/mapapi/ac.gif) no-repeat",});
map.addOverlay(haidianLabel2);
</script>