php,javscript调用百地图度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+ "
";            
            }
             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

好了！！！！