百度地圖在web中的使用（js）

背景：在公司做一個地理位置的自定義欄位，需要用到地圖來獲取經緯度和地址，在這選擇了百度地圖

準備工作

• 註冊百度地圖開發者，建立應用獲取key http://lbsyun.baidu.com/

使用過程

1. 引入js檔案

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=生成的key"></script>

1. 建立一個div容器用來顯示地圖：

<div id="map"></div>

1. 例項化地圖：

//百度地圖API功能
var map = new BMap.Map("map");    //建立Map例項

1. 使用百度地圖：

map.centerAndZoom(new BMap.Point(116.403963, 39.915119), 12);  // 初始化地圖,設定中心點座標和地圖級別，北京-天安門
    //新增地圖型別控制元件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("北京");          // 設定地圖顯示的城市 此項是必須設定的
    map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
 

1. 百度地圖獲取當前位置：（基於瀏覽器獲取）

    var geolocation = new BMap.Geolocation();          //例項化
    geolocation.getCurrentPosition(function(r){        //獲取當前位置方法  
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);         //r就是獲取到的資訊
            map.addOverlay(mk);        //建立標註
            map.panTo(r.point);        //標註移到這個地點
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
 

1. 百度地圖裡的智慧搜尋：

    //內部自定義函式，根據ID獲取物件
    function G(id) {
        return document.getElementById(id);
    }
    /*----------begin------*/
    var ac = new BMap.Autocomplete(    //建立一個自動完成的物件
        {"input" : "suggestId"
            ,"location" : map
        }
    );
    var myValue;    //搜尋內容
    //滑鼠點選下拉列表後的事件
    ac.addEventListener("onconfirm", function(e) {  //確定事件，得到搜尋的地址資訊
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });
    //搜尋地址
    function setPlace(){
        //搜尋後點擊時先清空原搜搜記錄
        $('#searchAddress').empty();   //之前的搜尋結果清空
        var local = new BMap.LocalSearch(map, { //智慧搜尋
            onSearchComplete: myFun
        });
        local.search(myValue);
        function myFun(){
            var sp = local.getResults().getPoi(0);    //獲取第一個智慧搜尋的結果
            if(sp){
                var pp = sp.point;
                lastSearch.lng = pp.lng;
                lastSearch.lat = pp.lat;  //得到搜尋位置的經緯度
                //搜尋顯示結果列表
                showSearchPlace(lastSearch.lng,lastSearch.lat,local.getResults().keyword);
            }else{
                showSearchPlace(0, 0, '該地址百度地圖解析失敗')
            }
        }
    }

1. 百度地圖根據經緯度獲取當前地址：

    /**
     * 根據經緯度獲取地址
     * @param lng
     * @param lat
     */
    function getAddressBylnglat(lng, lat){
        point = new BMap.Point(lng, lat);   //例項化
        var marker = new BMap.Marker(point);// 建立標註
        map.clearOverlays();                //新增新的標註前先清除其他的標註
        map.addOverlay(marker);             // 將標註新增到地圖中
        var getData = new BMap.Geocoder();  //根據經緯度獲取地址
        getData.getLocation(point, function(rs){
            var pointAddress = rs.addressComponents;
            var address = pointAddress.province+pointAddress.city+pointAddress.district+pointAddress.street+pointAddress.streetNumber;
            addTextToPoint(marker, address);//增加文字資訊
            marker.enableDragging();        //標註可拖拽
            // 開啟事件監聽
            marker.addEventListener("dragend", function (e) {
                var x = e.point.lng; //經度
                var y = e.point.lat; //緯度
                //根據經緯度獲取地址資訊
                getAddressBylnglat(x, y);
            });;
            //修改地圖底部的地址資訊
            //$('#suggestId').val('');
            clearAddress();                        //自定義方法，清除掉之前的記錄
            showSearchPlace(lng, lat, address)     //自定義方法，把查詢到的地址和經緯度顯示在頁面上
        });
    }

1. 百度地圖根據經緯度和地址資訊在地圖中建立標註同時文字資訊：

    /**
     * 在地圖上根據查詢的地址建立標註
     * @param
     */
    function makePoint(lng, lat, address){
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 15);  //地址顯示級別
        var marker = new BMap.Marker(point);// 建立標註
        map.clearOverlays();                //新增新的標註前先清除其他的標註
        map.addOverlay(marker);             // 將標註新增到地圖中
        addTextToPoint(marker, address);    //增加文字資訊
        marker.enableDragging();            //標註可拖拽
        // 開啟事件監聽
        marker.addEventListener("dragend", function (e) {
            var x = e.point.lng; //經度
            var y = e.point.lat; //緯度
            //根據經緯度獲取地址資訊
            getAddressBylnglat(x, y);
        });
    }
    //標註上增加文字資訊
    function addTextToPoint(marker, address){
        var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
        marker.setLabel(label);
    }