百度地圖使用

一、自動定位，獲取當前詳細信息

自動獲取當前地理位置能獲得經緯度及粗略地址信息，通過經緯度調用百度接口反查詳細地址信息

    function getLocation(){
        var geolocation = new BMap.Geolocation();  
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                $.ajax({
                    url:'http://api.map.baidu.com/geocoder/v2/',
                    type: 'GET',
                    data:{
                        // callback:'getAddress',
                        location:r.point.lat+','+r.point.lng,
                        output:'json',
                        ak:"your ak",
                    },
                    dataType:'jsonp',
                    success:function(res){
                        console.log(res);
                        var address = res.result.addressComponent.province+' '+res.result.addressComponent.city+' '+res.result.addressComponent.district;
                        $('#txt_area2').val(address);
                    }
                })
            }
            else {
                // alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    }

二、根據座標點畫圓及自定義點的圖標

通過關鍵字掉百度接口搜索地理座標，以座標爲點畫圓，給座標在地圖上標註圖標，及label信息

 <script type="text/javascript">
        var map = new BMap.Map("map"),
            shopLocationList = new Array(),
            point = new BMap.Point(116.40390583019587, 39.9151754663074);
        map.centerAndZoom(point, 15);
   //vue 代碼
      search: function () {
                    var _me = this;
                    if (!this.query.radius) {
                        this.query.radius = 5;
                    }
                    if (!this.query.keyword){
                        alert('請輸入地址')
                        return;
                    } 
                    //通過關鍵字搜索地址
                    map.clearOverlays();
                    $.ajax({
                        type: "get",
                        url: "http://api.map.baidu.com/geocoder/v2/?ak=your ak&output=json&address=" + _me.query.keyword,
                        async: false,
                        dataType: 'jsonp',
                        success: function (data, status) {
                            _me.query.status_code = data.status;
                            if (data.status == 0) {
                                _me.query.lng = data.result.location.lng;
                                _me.query.lat = data.result.location.lat;
                                drawCircle(_me.query.lng, _me.query.lat, _me.query.radius);
                            } else {
                                _me.query.lng = 116.40390583019587;
                                _me.query.lng = 39.9151754663074;
                            }
                           
                        },
                        error: function (error) {
                            alert(JSON.stringify(error) + "百度地圖API功能調用失敗！");
                        }
                    });
                },

        function drawCircle(lng, lat, radius) {
            var point = new BMap.Point(lng, lat)
            map.panTo(point);
            var circle = new BMap.Circle(point, radius * 1000,
                {
                    strokeColor: "red",
                    strokeWeight: 1,
                    strokeOpacity: 0.9,
                    fillColor: "blue",
                    fillOpacity: 0.1
                }
            );
            map.addOverlay(circle);
            // 替換標記點圖
            var myIcon = new BMap.Icon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAhCAYAAAA2/OAtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM4QTRBQjRFNjNDMjExRTc4OTJERkM5M0MyMDNEOUU5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM4QTRBQjRGNjNDMjExRTc4OTJERkM5M0MyMDNEOUU5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzhBNEFCNEM2M0MyMTFFNzg5MkRGQzkzQzIwM0Q5RTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzhBNEFCNEQ2M0MyMTFFNzg5MkRGQzkzQzIwM0Q5RTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5SiWhrAAACJ0lEQVR42uyVzU7bQBCAZ8dJJSTnTwWpPWFVQlDhiOTEgQP0CUivPcEF9QjqAzR9gJYH6KF5A3gFqvbQE6ksRBASmBsVIJwfCYHxbmdRXIXdjRNaestI/pnZnc8zsztrBgPk0nWXgLEcF6KEjNXJFBQ8byfJhxlBjpPnmcwmvVboyhumBHRtYxh+KDQa/kDoebG4QsbNPjANLgA2xj2v1hd64bpVSvU9PFxqTz1vVYN2I/wCfykU8WocMeup4bExZSFa8IztW9P8KjrAMTgVLymbrKkUVOOyrHFKaty2qyYge8G/pz5GLmZxXuopiIC3eDOqWjv8Jy4q0/M8nZacFewaKibgk89igYC5XrvU05/EIpuLvhqiXb7zvZydLXHEXXU0vRW2CJDtV0MZcVhJMbUUKMQrJKNexwwllwCMI4bn0FDtEfGQbo6W+gR0hllxnBJXmq/sPEsIrSPEGdjDQPkhG9N8qZWRtkygzW7jHNWslQiU46dsWrVbnPtY2NurE/hEHQzfWvtJ0Nt3lkePnGJuSl68pWqa1y+cv37DfqgRS/1mjX0TR7hgaBSto3zDl+PdUMcyBHyXGqSNpT7BN7Hddgq+H/T2foWUrcfo/Th9IMO2HPhX4D1oF1yjCa9lKkPymiow+eS37XV5OFDHTZpgclGw06nKGg71O7n3gZkZh06f4z+pcV6+24YP/UepclEsividTviBPgj/QUbQEXQEfUz5LcAAq/vfhx3QTEwAAAAASUVORK5CYII=", new BMap.Size(22, 60));
            // 實例化標記
            starMarker = new BMap.Marker(point, {
                icon: myIcon
            });
            starMarker.addEventListener("click", function () {
                var p = starMarker.getPosition();
                alert("這裏是您所查找的中心點！\n座標：" + p.lng + "，" + p.lat);
            });
            map.addOverlay(starMarker);
        }
function addShopMarker(point) {
            var marker = new BMap.Marker(point);
            marker.addEventListener("click", function () {
                var p = marker.getPosition();
                alert("msg");
            });
            map.addOverlay(marker);
            marker.setLabel(new BMap.Label('msg', {
                offset: new BMap.Size(20, -10),
                color: "red",
                fontSize: "12px",
                backgroundColor: "white"
            }));
        }

    </script>