百度地图API（三）

HTML

　　调用百度地图API，始终需要在html上展示，所以需要定义一个html来呈现地图，具体定义

 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

　　首先，定义一些必要的公共变量

 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行//

　　以下这些是基本的方法，上面都有解释说明每个方法的作用

 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 //*结束*//

　　添加覆盖物

  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

　　添加地图服务

  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

　　添加地图工具

 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是根据业务写的，不过也许会用到，像清空所有覆盖物等，就一块写上

  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 //*结束//

View Code

Waiting

　　这篇对于做web的童鞋比较简单，对于cs来时就郁闷了，也算是摸索着做js，也许有不正确的地方，欢迎指出~

　　下一篇，应该是具体应用~

相关阅读:
服务器状态码
 QuerySet中添加Extra进行SQL查询
 django配置一个网站建设
 MySQL数据库查询中的特殊命令
 125. Valid Palindrome
121. Best Time to Buy and Sell Stock
117. Populating Next Right Pointers in Each Node II
98. Validate Binary Search Tree
91. Decode Ways
90. Subsets II
原文地址：https://www.cnblogs.com/shadow-fei/p/4682595.html