百度地图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