【百度地圖API】如何製作商圈地圖？行政地圖？

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

摘要：

　　想要顯示某一個地區，並且滑鼠放上去，該地區就會變色。這時，你就需要巧用多邊形覆蓋物，和它的滑鼠事件了！

　　快來看看去哪兒網的執行個體吧：http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16

---------------------------------------------------------------------------------------------

一、建立地圖

這裡我使用的是衛星圖，並且添加了魚骨控制項。

var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP});      //設定衛星圖為底圖
map.centerAndZoom(new BMap.Point(116.404, 39.915),12);                     // 初始化地圖,設定中心點座標和地圖層級。
map.addControl(new BMap.NavigationControl());  //添加魚骨控制項
map.addControl(new BMap.MapTypeControl());          //添加地圖類型控制項
map.setCurrentCity("北京");          // 設定3D地圖顯示的城市 此項是必須設定的

二、建立多邊形

多邊形的各個點，是需要自己設定的。

我們可以使用座標拾取工具來找點。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",function(){
    secRingPolygon.setStrokeColor("red");
});

2、mouseout

相應地，如果滑鼠移出呢，紅色就變回原來的藍色。

secRingPolygon.addEventListener("mouseout",function(){
    secRingPolygon.setStrokeColor("blue");
});

3、click

如果點擊多邊形，地圖就放大一級。並且設定一下地圖的中心點。

secRingPolygon.addEventListener("click",function(){
    map.zoomIn();
    secRingPolygon.setStrokeColor("red");
    map.setCenter(secRingCenter);
});

四、建立標籤

這裡的標籤有兩個，一是小型的地標標籤。

是對多邊形的一個說明。

圖示：

var secRingLabel2 = new BMap.Label("二環",{offset: new BMap.Size(10,-20), position: secRingCenter});
secRingLabel2.setStyle({"padding": "2px"});
map.addOverlay(secRingLabel2);

第二個就是滑鼠放到多邊形上，顯示的商圈說明標籤。

圖示：

var secRingLabel = new BMap.Label("北京市二環，包括了東城區</br>和西城區。著名旅遊景點有</br>天安門、故宮、後海、北海</br>公園、景山、南鑼鼓巷等。",{offset: new 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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More