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

好了！！！！