百度地圖API（三）

時間 2019-11-16

標籤百度地圖 api 简体版

原文原文鏈接

HTML

　　調用百度地圖API，始終須要在html上展現，因此須要定義一個html來呈現地圖，具體定義javascript

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 6 <style type="text/css">
 7 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
 8 #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
 9 #r-result{height:100%;width:20%;float:left;}
10 </style>
11 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XX"></script>
12 <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
13 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
14 <script type="text/javascript" src="api.js"></script>
15 <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
16 <title>百度地圖</title>
17 </head>
18 <body>
19 <div id="geo" style="display:none"></div>
20 <div id="lng" style="display:none"></div>
21 <div id="lat" style="display:none"></div>
22 <div id="allmap" ></div>
23 </body>
24 </html>
25 <script type="text/javascript">
26 //顯示一個地圖
27 var map = new BMap.Map("allmap");          
28 map.addControl(new BMap.NavigationControl());
29 map.addControl(new BMap.MapTypeControl());
30 map.addControl(new BMap.ScaleControl());       
31 map.addControl(new BMap.OverviewMapControl()); 
32 map.enableScrollWheelZoom();          
33 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
34 
35 
36 //地址的圖標
37 var addrIcon = new BMap.Symbol(BMap_Symbol_SHAPE_POINT,{scale: 1,fillColor: "blue",fillOpacity: 0.8});
38     
39 //綁定鼠標單擊事件
40 map.addEventListener("click", function(e)
41 {  
42     document.getElementById("lng").innerText = e.point.lng;
43     document.getElementById("lat").innerText = e.point.lat;
44     map.enableScrollWheelZoom();    
45 });
46 </script>

第一個script中ak是百度地圖的密鑰，須要申請帳號纔會有的，能夠去百度官方申請一個，這是須要注意的
剩下的幾個script是百度地圖的樣式和js文件
body裏面的div定義一個地理編碼，經度，緯度，還有一個地圖控件，尚未賦值
在最下面的script中，定義了一個BMap，而後在BMap上添加控件（對應MapControl中的AddControl方法）
enableScrollWheelZoom方法是鼠標滾動輪放大縮小地圖功能可用
centerAndZoom方法是地圖的中心和地圖的尺寸，地圖尺寸一共是18種
addrIcon定義了一個地址的圖標，一些百度地圖上的圖標定義，在js中是無效的，因此只能定義在html中
最後一個是鼠標的點擊事件，給經度緯度賦值，並設鼠標滑動輪可用

API.js

　　首先，定義一些必要的公共變量css

 1 //*定義必要的公共變量
 2 var maker;//標註對象
 3 var distance;//測距對象
 4 var drawingManager;//繪圖對象
 5 var drag;//拖框縮放對象
 6 //繪製工具欄外觀設定
 7 var styleOptions = {
 8     strokeColor: "red",    //邊線顏色。
 9     fillColor: "red",      //填充顏色。當參數爲空時，圓形將沒有填充效果。
10     strokeWeight: 3,       //邊線的寬度，以像素爲單位。
11     strokeOpacity: 0.8,       //邊線透明度，取值範圍0 - 1。
12     fillOpacity: 0.6,      //填充的透明度，取值範圍0 - 1。
13     strokeStyle: 'solid' //邊線的樣式，solid或dashed。
14 }
15 //*
16 //*結束16行//

　　如下這些是基本的方法，上面都有解釋說明每一個方法的做用html

 1 //*地圖基礎方法*//
 2 //地圖平移
 3 function PanTo(lng, lat)
 4 {
 5     map.panTo(new BMap.Point(lng, lat));
 6 }
 7 //返回當前地圖中心座標
 8 function GetCenter()
 9 {
10     document.getElementById("lng").innerText = map.getCenter().lng;
11     document.getElementById("lat").innerText =map.getCenter().lat;
12 }
13 //地圖移到指定位置
14 function MoveMapTo(lng, lat, mapSize)
15 {
16     var point = new BMap.Point(lng, lat);
17     map.centerAndZoom(point, mapSize);
18     map.enableScrollWheelZoom(); 
19 }
20 //設置當前地圖所在城市
21 function SetCity(CityName)
22 {
23     map.setCenter(CityName);
24 }
25 //將地圖放大一級
26 function ZoomIn()
27 {
28     map.zoomIn();
29 }
30 //將地圖縮小一級
31 function ZoomOut() {
32     map.zoomOut();
33 }
34 //添加版權控件
35 function AddCopyrightControl()
36 {
37     map.addControl(new BMap.CopyrightControl());
38 }
39 //添加地圖類型控件
40 function AddMapTypeControl()
41 {
42     map.addControl(new BMap.MapTypeControl());
43 }
44 //添加比例尺控件
45 function AddScaleControl()
46 {
47     map.addControl(new BMap.ScaleControl());
48 }
49 //添加縮略圖控件
50 function AddOverviewMapControl()
51 {
52     map.addControl(new BMap.OverviewMapControl());
53 }
54 //開啓滾輪調節地圖
55 function EnableScrollWheelZoom()
56 {
57     map.enableScrollWheelZoom();
58 }
59 //關閉滾輪調節地圖
60 function DisableScrollWheelZoom() 
61 {
62     map.disableScrollWheelZoom();
63 }
64 //*
65 //*結束*//

　　添加覆蓋物java

  1 //*覆蓋物方法*//
  2 //添加路線
  3 function AddUserRoute(allArray)
  4 {
  5     var item = allArray.split(',');
  6     var polylinePointsArray = [];
  7     var latAry = new Array();
  8     var lngAry = new Array();
  9     var j = 0;
 10     for(var i = 0; i<item.length;i=i+2)
 11     {
 12         polylinePointsArray[j] = new BMap.Point(item[i],item[i+1]);
 13             j++;
 14     }
 15     var polyline = new BMap.Polyline(
 16     polylinePointsArray, 
 17     {strokeColor:"blue", strokeWeight:2, strokeOpacity:1}); 
 18     map.addOverlay(polyline);
 19     map.enableScrollWheelZoom();
 20 }
 21 
 22 //添加用戶圖標
 23 function AddUserMarker(lng, lat,userName,content)
 24 {
 25     var point = new BMap.Point(lng, lat);
 26     var label = new BMap.Label(userName,{offset:new BMap.Size(20,-10)});
 27     //var myIcon = new BMap.Icon("person3.png", new BMap.Size(50,30));
 28     var marker = new BMap.Marker(point);  // 添加用戶圖標
 29     marker.setLabel(label);
 30     map.addOverlay(marker);
 31     // 建立信息窗口對象
 32     var opts = {
 33       width : 250,     // 信息窗口寬度
 34       //height: 120,     // 信息窗口高度
 35       title : "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ userName +"</h4>", // 信息窗口標題
 36       //title : '<span style="font-size:14px;color:#0A8021"> +userName + </span>',
 37       enableMessage:false,//設置容許信息窗發送短息
 38       message:""
 39     }
 40     var info = new BMap.InfoWindow(content,opts);
 41     marker.addEventListener("click", function () 
 42     {
 43         map.openInfoWindow(info,point);
 44     });
 45 }
 46 //添加一個圓
 47 function AddCirle(lng, lat, r)
 48 {
 49     var circle = new BMap.Circle(new BMap.Point(lng, lat), r);
 50     map.addOverlay(circle);
 51 }
 52 //添加交通流圖層
 53 function AddTrafficLayer()
 54 {
 55     var traffic = new BMap.TrafficLayer();   
 56     map.addTileLayer(traffic);
 57 }
 58 //添加普通標註
 59 function AddNormalMaker(lng, lat) 
 60 {
 61     var marker = new BMap.Marker(new BMap.Point(lng, lat));  // 建立標註
 62     map.addOverlay(marker);
 63 }
 64 //標註開啓拖拽
 65 function OpenMakerDraging()
 66 {
 67     marker.enableDragging(true);
 68 }
 69 //標註關閉拖拽
 70 function CloseMakerDraging()
 71 {
 72     marker.disableDragging(true);
 73 }
 74 //添加動畫標註
 75 function AddAnimationMaker(lng, lat)
 76 {
 77     var userIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size
 78 
 79 (300,157));
 80     var marker = new BMap.Marker(new BMap.Point(lng, lat),{icon:userIcon});  // 建立標註
 81     
 82     // var marker = new BMap.Marker(new BMap.Point(lng, lat));  // 建立標註
 83     map.addOverlay(marker);
 84     marker.setAnimation(BMAP_ANIMATION_BOUNCE);
 85 }
 86 //添加包含一個標籤的標註
 87 function AddLabelMaker(lng, lat, content)
 88 {
 89     var userIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size
 90 
 91 (300,157));
 92     var marker = new BMap.Marker(new BMap.Point(lng, lat),{icon:userIcon});  // 建立標註
 93     var label = new BMap.Label(content,{offset:new BMap.Size(20,-10)});
 94     marker.setLabel(label);
 95     map.addOverlay(marker);
 96 }
 97 //添加包含一個信息窗口的標註marker.openInfoWindow(infoWindow);
 98 function AddWindowMaker(lng, lat, content)
 99 {
100     var point = new BMap.Point(lng, lat);
101     var marker = new BMap.Marker(point);  // 建立標註
102     map.addOverlay(marker);
103     var opts = {
104       width : 200,     // 信息窗口寬度
105       height: 100,     // 信息窗口高度
106       title : "外訪某某",  // 信息窗口標題
107       enableMessage:false
108     }
109         // 建立信息窗口對象
110         var info = new BMap.InfoWindow(content);
111     marker.addEventListener("click", function () {
112     
113         map.openInfoWindow(info,point);
114     });
115 }
116 //添加城市邊界
117 function SetBoundary(city)
118 {
119     var bdary = new BMap.Boundary();
120     bdary.get(city, function (rs) {       //獲取行政區域
121         map.clearOverlays();        //清除地圖覆蓋物       
122         var count = rs.boundaries.length; //行政區域的點有多少個
123         for (var i = 0; i < count; i++) {
124             var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); 
125 
126 //創建多邊形覆蓋物
127             map.addOverlay(ply);  //添加覆蓋物
128             map.setViewport(ply.getPath());    //調整視野         
129         }
130     });
131 }
132 //添加一個信息窗口
133 function AddInfoWindow(lng,lat,content)
134 {
135     var point=new BMap.Point(lng, lat);
136     var info = new BMap.InfoWindow(content);
137     map.openInfoWindow(info,point);
138 }
139 //添加一個標註
140 function AddLabel(lng, lat, content)
141 {
142     var point = new BMap.Point(lng, lat);
143     var opts =
144     {
145         position: point,
146         offset: new BMap.Size(0, -0)
147     }
148     var label = new BMap.Label(content, opts);
149     label.setStyle({
150         color: "red",
151         fontSize: "10px",
152         height: "10px",
153         lineHeight: "10px",
154         fontFamily: "微軟雅黑"
155     });
156     map.addOverlay(label);
157 }
158 //*
159 //*結束*//

View Code

　　添加地圖服務web

  1 //*地圖服務*//
  2 //本地搜索
  3 function LocalSearch(keywords)
  4 {
  5     var local = new BMap.LocalSearch(map, {
  6         renderOptions: { 
  7             map: map,
  8             autoViewport: true
  9         }  
 10     });
 11     local.search(keywords);
 12 }
 13 //周邊搜索
 14 function SearchNearby(keywords, center)
 15 {
 16     var local = new BMap.LocalSearch(map, {
 17         renderOptions: {
 18             map: map,
 19             autoViewport: true
 20         }
 21     });
 22     local.searchNearby(keywords, center);
 23 }
 24 //範圍搜索
 25 function SearchInBounds(keywords)
 26 {
 27     var local = new BMap.LocalSearch(map, {  
 28         renderOptions: {
 29             map: map
 30         }
 31     });  
 32     local.searchInBounds(keywords, map.getBounds());
 33 }
 34 //公交導航
 35 function GetTransitRoute(start, end)
 36 {
 37     var transit = new BMap.TransitRoute(map, {
 38         renderOptions: {
 39             map: map,
 40             autoViewport: true
 41         }
 42     });
 43     transit.search(start, end);
 44 }
 45 //步行導航
 46 function GetWalkingRoute(start, end)
 47 {
 48     var walking = new BMap.WalkingRoute(map, {
 49         renderOptions: {
 50             map: map,
 51             autoViewport: true
 52         }
 53     });
 54     walking.search(start, end);
 55 }
 56 //駕車導航
 57 function GetDrivingRoute(start, end)
 58 {
 59     var driving = new BMap.DrivingRoute(map, {
 60         renderOptions: {
 61             map: map,
 62             autoViewport: true
 63         }
 64     });
 65     driving.search(start, end);
 66 }
 67 //返回指定座標所在地址
 68 function GetByPoint(lng, lat)
 69 {
 70     var gc = new BMap.Geocoder();
 71     pt = new BMap.Point(lng, lat);
 72     gc.getLocation(pt, function (rs) {
 73         var addComp = rs.addressComponents;
 74         document.getElementById("geo").innerText = addComp.province + ", " + addComp.city + ", " + 
 75 
 76 addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
 77     });
 78 }
 79 //返回指定地址的座標
 80 function GetByAddress(geo)
 81 {
 82     //經過IP定位獲取當前城市名稱
 83     IP();
 84     var cityName=document.getElementById("geo").innerText
 85     var myGeo = new BMap.Geocoder();
 86     // 將地址解析結果顯示在地圖上,並調整地圖視野
 87     myGeo.getPoint(geo, function (point) {
 88         if (point) {
 89             map.centerAndZoom(point, 16);
 90             map.addOverlay(new BMap.Marker(point));
 91             document.getElementById("lng").innerText = point.lng;
 92             document.getElementById("lat").innerText = point.lat;
 93         }
 94     }, cityName);
 95 }
 96 //IP定位
 97 function IP() {
 98     var myCity = new BMap.LocalCity();
 99     myCity.get(myFun);
100     function myFun(result) {
101         var cityName = result.name;
102         document.getElementById("geo").innerText = cityName;
103         map.setCenter(cityName);
104     }
105 
106 }
107 //*
108 //*結束*//

View Code

　　添加地圖工具api

 1 //*地圖工具*//
 2 //開啓地圖測距工具
 3 function DistanceToolOpen()
 4 {
 5     var distance = new BMapLib.DistanceTool(map);//測距組件
 6     distance.open();
 7 }
 8 //關閉地圖測距工具
 9 function DistanceToolOpen()
10 {
11     distance.close();
12 }
13 //開啓地圖拖拽放大工具
14 function DragAndZoomOpen()
15 {
16     var drag = new BMap.DragAndZoomTool(map);
17     drag.open();
18 }
19 //關閉地圖拖拽放大工具
20 function DragAndZoomOpen()
21 {
22     drag.close();
23 }
24 //開啓地圖繪製工具
25 function DrawingManagerOpen()
26 {
27 
28     //實例化鼠標繪製工具
29     var drawingManager = new BMapLib.DrawingManager(map, {
30         isOpen: true, //是否開啓繪製模式
31         enableDrawingTool: true, //是否顯示工具欄
32         drawingToolOptions: {
33             anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置
34             offset: new BMap.Size(5, 5), //偏離值
35             scale: 0.8 //工具欄縮放比例
36         },
37         circleOptions: styleOptions, //圓的樣式
38         polylineOptions: styleOptions, //線的樣式
39         polygonOptions: styleOptions, //多邊形的樣式
40         rectangleOptions: styleOptions //矩形的樣式
41     });
42 }
43 //關閉地圖繪製工具
44 function DrawingManagerClose()
45 {
46     drawingManager.close();
47 }
48 //*
49 //*結束*//

View Code

　　剩下的幾個function是根據業務寫的，不過也許會用到，像清空全部覆蓋物等，就一塊寫上ide

  1 //*Add By Phil*//
  2 
  3 //清空全部路線if(allOverlay[i].getLabel() == null)
  4 function ClearAllUserRoute(userCount)
  5 {
  6     var allOverlay = map.getOverlays();
  7     for(var i = userCount;i < allOverlay.length ; i++)
  8     {        
  9      {
 10           map.removeOverlay(allOverlay[i]);
 11      }
 12     }
 13 }
 14 
 15 //清除全部覆蓋物
 16 function ClearAllOverlay()
 17 {
 18     map.clearOverlays();
 19 }
 20 
 21 //選擇人員
 22 function SelectedUserMarker(userName)
 23 {
 24     var allOverlay = map.getOverlays();
 25     for(var i = 0; i < allOverlay.length ; i++)
 26     {
 27         if(allOverlay[i].getLabel().content == userName)
 28         {
 29         allOverlay[i].setAnimation(BMAP_ANIMATION_BOUNCE);
 30         break;
 31         }
 32     }
 33 }
 34 
 35 //多個地址  55行
 36 function GetAddresses(lng,lat,addressArray)
 37 {
 38     var userPoint = new BMap.Point(lng,lat);
 39     var myGeo = new BMap.Geocoder();
 40     var index = 0;
 41     for(var i = 0; i < addressArray.length ; i++)
 42     {
 43      myGeo.getPoint(addressArray[i],function(point)
 44      {
 45          if(point)
 46          {
 47         var address = new BMap.Point(point.lng,point.lat);
 48         AddAddressMarker(address,new BMap.Label(index + ":" + add,{offset:new BMap.Size(20,-
 49 
 50 10)}));
 51         ConnectTwoPoint(userPoint,point);
 52          }
 53      }
 54      )
 55     index++;
 56     }
 57 }
 58 
 59 //單獨地址 
 60 function GetSingleAddress(lng,lat,addr,cityName)
 61 {
 62     var userPoint = new BMap.Point(lng,lat);
 63     var myGeo = new BMap.Geocoder();
 64     myGeo.getPoint(addr,function(point)
 65      {
 66          if(point)
 67          {        
 68         var address = new BMap.Point(point.lng,point.lat);
 69         AddAddressMarker(address,new BMap.Label(addr,{offset:new BMap.Size(20,-10)}));
 70         ConnectTwoPoint(userPoint,point);
 71          }
 72      },cityName
 73      );
 74 }
 75 
 76 //地圖添加地址圖標
 77 function AddAddressMarker(point,label)
 78 {
 79     var addrMarker = new BMap.Marker(point,{icon:addrIcon});
 80     map.addOverlay(addrMarker);
 81     addrMarker.setLabel(label);
 82 }
 83 
 84 //鏈接地圖兩點
 85 function ConnectTwoPoint(firstPoint,secondPoint)
 86 {
 87     //右鍵菜單事件
 88     //var removePoly = function(e,ee,polyline){map.removeOverlay(polyline);}
 89       //建立右鍵菜單
 90     //var polyMenu=new BMap.ContextMenu();
 91     //polyMenu.addItem(new BMap.MenuItem("刪除",removePoly.bind(polyline)));
 92 
 93     var polyline = new BMap.Polyline(
 94     [firstPoint,secondPoint], 
 95     {strokeColor:"maroon", strokeWeight:2, strokeOpacity:1}); 
 96      map.addOverlay(polyline);
 97     //添加右鍵菜單
 98     //polyline.addContextMenu(polyMenu);
 99 }
100 
101 //*
102 //*結束//