百度地图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，也许有不正确的地方，欢迎指出~

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

posted on 2015-07-28 13:53 shadow_飛阅读(703) 评论(0) 编辑收藏举报