php,调用百地图度API实现标记

最近一个项目需要用到地图的定位和标记功能，本来考虑使用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 的手册。