百度地圖api使用
阿新 • • 發佈：2017-07-07
apt htc remove 百度地圖 自己 密鑰 技術 title mar
1.入門程序
（1）引入baidu地圖的javascrpt文件（http路徑訪問百度地圖api官網）
<script src="http://api.map.baidu.com/api?v=1.5&ak=密鑰" type="text/javascript"></script>（2）編寫html代碼（百度地圖會根據id設定div中的內容）：
<div id=" myMap " style="width:500px;height:320px"></div>（3）調用api初始化地圖
//根據div的id= map的map構建地圖內存對象。
//BMap是百度地圖類，封裝了顯示百度地圖的方法和屬性，參數為容器所對應的id
var map = new BMap.Map("myMap");
map.enableScrollWheelZoom();//啟用滾輪放大縮小 縮放等級介紹圖:
縮放等級介紹圖
（4）構建在地圖上要顯示的區域中心點位置121.491, 31.233可以理解為橫坐標和縱坐標，即經度緯度
var point = new BMap.Point(121.491, 31.233);
// 顯示地圖，並設定地圖等級
map.centerAndZoom(point, 3); //縮放等級
2.控件：
百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過Control類來實現自定義控件。
a.地圖API中提供的控件：
- Control：所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。
- NavigationControl：地圖平移縮放控件，PC端默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認位於地圖右下方。
- OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可折疊的縮略地圖。
- MapTypeControl：地圖類型控件，默認位於地圖右上方。
- CopyrightControl：版權控件，默認位於地圖左下方。
- GeolocationControl：定位控件，針對移動端開發，默認位於地圖左下方
b.引入控件：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl()); 可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件後，它們即刻生效。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());c.刪除控件：
刪除控件:map.removeControl(control);d.修改控件：
| 構造函數 | 描述 |
|---|---|
| setAnchor(anchor:enum ControlAnchor) | 設置控件停靠的位置 |
| getAnchor | 返回控件停靠的位置 |
其中setAnchor()方法的anchor允許的值為：
- BMAP_ANCHOR_TOP_LEFT表示控件定位於地圖的左上角。
- BMAP_ANCHOR_TOP_RIGHT表示控件定位於地圖的右上角。
- BMAP_ANCHOR_BOTTOM_LEFT表示控件定位於地圖的左下角。
- BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位於地圖的右下角。
3.覆蓋物：
a.簡介
覆蓋物：所有疊加或覆蓋到地圖的內容，我們統稱為地圖覆蓋物。如標註、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標，當您拖動或縮放地圖時，它們會相應的移動。
地圖API提供了如下幾種覆蓋物：
- Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。
- Marker：標註表示地圖上的點，可自定義標註的圖標。
- Label：表示地圖上的文本標註，您可以自定義標註的文本內容。
- Polyline：表示地圖上的折線。
- Polygon：表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以為其添加填充顏色。
- Circle:表示地圖上的圓。
- InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。
- 標註：標註表示地圖上的點。API提供了默認圖標樣式
b.創建標註
var map = new BMap.Map(“map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); //創建標註
map.addOverlay(marker); //將標註添加到地圖中c.註冊事件
marker.addEventListener("click",function(){
alert("點擊事件");
});d.可拖拽標註
marker.enableDragging();
marker.addEventListener("dragend",function(e){
alert("當前位置：" +e.point.lng + ", " + e.point.lat);
})e.刪除標註（刪除其他覆蓋物調用同樣的方法）
map.removeOverlay(marker);f.信息窗口：
信息窗口在地圖上方的浮動顯示HTML內容。信息窗口可直接在地圖上的任意位置打開，也可以在標註對象上打開（此時信息窗口的坐標與標註的坐標一致）。您可以使用InfoWindow來創建一個信息窗實例，註意同一時刻地圖上只能有一個信息窗口處於打開狀態
打開窗口：
var opts = {
width: 250, //信息窗口寬度
height:100, //信息窗口高度
title: "Hello" //信息窗口標題
}
var infoWindow = new BMap.InfoWindow("<input type = ‘button‘ value=‘按鈕‘>", opts); //創建信息窗口對象
map.openInfoWindow(infoWindow, map.getCenter()); //打開信息窗口g.隱藏與顯示
marker.hide(); // 隱藏覆蓋物
Marker.show(); // 顯示覆蓋 百度地圖api使用