标签：des c style class blog code
最近一个项目需要用到地图的定位和标记功能，本来考虑使用google map API 。但是在国内这个速度确实很慢，有时候加载到一半就出现错了，不过可以通过google agent 来解决在国内的访问速度的问题，但是这样还是很麻烦。所以自己决定使用百度地图的API来实现。好了直接先上一张效果图吧，地图的区域是随便选的。
完成的功能:
1.根据提供的地址在地图上定位
2.创建了多边形区域，该区域可以灵活的标记，例如关于一些配送范围，就可以通过标记来完成。
要实现以上效果需要以下步骤：
1.先申请百度地图API 的访问的 key(ak) ,可以通过这个地址来申请:http://lbsyun.baidu.com/apiconsole/key?application=key
在申请key的时候你需要确定的是你的这个key的应用类型是什么,server or mobile ... 可以参考下图：
2.在你的工程中直接引入百度V1.3的接口文件
<script src="http://api.map.baidu.com/api?v=1.3&ak=you key" type="text/javascript"></script>
其中如果你引入的版本低于1.3，那么这块需要将ak换成key 就好了，you key 就是申请的key , 在这里我的key的应用类型是 for browser的。
3.javascript 代码部分
var map = new BMap.Map("container"); var mypoint = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(mypoint,15); // 初始化地图，设置中心点坐标和地图级别 // map.setMapType(BMAP_SATELLITE_MAP); 设置地图类型 var marker = new BMap.Marker( mypoint ); map.addOverlay( marker ); marker.addEventListener("click", function(){ var infoWin = new BMap.InfoWindow("your show information");//定义显示信息 this.openInfoWindow(infoWin); }); var x1 = mypoint.lat+0.002; var x2 = mypoint.lat- 0.002; var y1 = mypoint.lng + 0.002; var y2 = mypoint.lng - 0.002; var secRing = [ new BMap.Point(y1, x1), // 经度 纬度 new BMap.Point(y1, x2), new BMap.Point(y2, x2), new BMap.Point(y2, x1) ]; //创建多边形 var secRingPolygon = new BMap.Polygon( secRing, { strokeColor:"#f50704", fillColor:"#FF0000", strokeWeight:2, fillOpacity:0, strokeOpacity:0.8 } ); map.addOverlay(secRingPolygon); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 // 创建Map实例 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开
其中 secRing 部分是构造矩形区域的代码，该矩形区域是由API中提供的 Polygon 来实现的。以上代码的效果是该多边形区域是不可以自由标记的。所以需要在把secRingPolygon加到map之前，需要用以下代码来允许该多边形区域可编辑。
secRingPolygon.enableEditing();
以上的代码就可以实现效果图。但是如果需要把多边形每次编辑的坐标记录下来，或者是记录编辑区域的运动轨迹，那么就需要secRingPolygon添加一个事件(mouseout),然后通过getPath这个函数来获取编辑后的轨迹。如果有业务的需求，你可以把该轨迹存储到数据库中，当下次加载的时候，你可以直接把该轨迹估值给secRing 这个数组，这样你的标记就可以在地图上显示。
//添加事件 secRingPolygon.addEventListener("mouseout", function(){ var pathObj = secRingPolygon.getPath(); var htmlStr = ""; for(var i in pathObj){ var position = pathObj[i]; htmlStr += position.lng +","+position.lat+ "<br>"; } document.getElementById(‘info‘).innerHTML = htmlStr });
这块直接把运动后的轨迹输出到页面。
还有就是如果通过一个给定的地址来在地图上标记出来，目前采用的是通过PHP提供的curl接口，调用geocoder的v2 api 来得到改地址的经纬度。
可以参考：http://developer.baidu.com/map/webservice-geocoding.htm
该接口返回的参数格式可以选择json或者是其它的。json格式返回结果的如下：
//不带回调函数的返回值 { status: 0, result: { location: { lng: 116.30814954222, lat: 40.056885091681 }, precise: 1, confidence: 80, level: "商务大厦" } }
PHP代码如下：
$address = urlencode($addr); $url = "http://api.map.baidu.com/geocoder/v2/?address=$address&output=json&ak=your key"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); $response = curl_exec($ch); curl_close($ch); $result = json_decode($response, true); $lat = $result["result"]["location"]["lat"]; $lng = $result["result"]["location"]["lng"];
其中你的 addr就是地址，需要用urlencode进行转义。
这样你就可以获取到当前地址的经度和纬度信息，然后输出到前端，再调用 new BMap.Point(lat,lng); 来进行渲染。
这块你可以对baidu map API 再次封装，供项目中其它的地方使用。地图API的功能远不止这些，还有很多用法可以直接参考百度 map API 的手册。
还有更多的demo可以参考:http://developer.baidu.com/map/jsdemo.htm
好了！！！！
php,调用百地图度API实现标记,布布扣,bubuko.com
标签：des c style class blog code
原文地址：http://www.cnblogs.com/stackflow/p/3761611.html
