JS引入高德地圖定位

在此記錄一下X項目使用高德地圖的思路高德地圖(X項目前端框架是Jquery)

1首先需要了解高德地圖的開發(fā)機(jī)制

2準(zhǔn)備工作(封裝方法，以便直接調(diào)用)

—2.1封裝存儲地理位置的方法(localStorage.js-參考)

—2.2封裝超時方法($.timeOut-參考)

—2.3封裝異步調(diào)用地圖的方法

/**
 * 異步加載地圖js
 * @param e: 加載完成回調(diào)方法名稱,字符串格式;
 */
$.GDMapLoad = function(e){
    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值';
    if(e){
        if(!$.ownStore.get("GDmapPosition")){//定位信息
            var GDmapPosition= {};//new AMap.Geocoder();
            GDmapPosition.ststus = "0";
            GDmapPosition.lng = "";
            GDmapPosition.lat = "";
            GDmapPosition.province = "";
            GDmapPosition.city = "XX市";
            GDmapPosition.cityCode = "";
            GDmapPosition.address = "";
            $.store.set("CGDmapPosition" , CGDmapPosition);
        }
        url += '&callback=' + e;
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
  } else{
        $("body").append('<script type="text/javascript" src="'+ url +'"></script>');
  }
}

3編寫代碼

—3.1 寫一個頁面樣例：

——3.1. HTML:
<div class="map">
    <span id="mapPosition">正在定位...</span>
</div>
——3.1. JS://瀏覽器定位
var isMapSuccess = 0;//初始化定位失敗
$(function () {
  $.GDMapLoad('GDMapInit');
})
/**
 * 高德地圖回調(diào)
 */
function GDMapInit(){
    $("#mapPosition").click(function(){//是為失敗的時候，點擊位置跳轉(zhuǎn)地圖頁面進(jìn)行定位
        var link = "../map.html?cbBack=" + $.encode(window.location.href);
        window.location.href = link;
    });
    var GDmapPosition= {};
    if ($.timeOut('indexMapInit')) {//此處d調(diào)用封裝的獲取session 超時方法
        GDmapPosition = $.store.get('CGDmapPosition') || {};
        if (GDmapPosition .ststus == '1') {//是否定位成功
            isMapSuccess = 1;
            $("#position").text(CGDmapPosition.city + CGDmapPosition.district);
            return;
        }
    }
    AMap.plugin('AMap.Geolocation', function() {//引入插件-瀏覽器定位(https://lbs.amap.com/api/javascript-api/guide/services/geolocation)
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默認(rèn):true
            timeout: 3000 //超過10秒后停止定位，默認(rèn)：5s
        });
        geolocation.getCurrentPosition(function(status, result) {
            if (status == 'complete') {//定位成功
                  GDmapPosition.ststus = '1';
                  GDmapPosition.lng = result.position.lng;
                  GDmapPosition.lat = result.position.lat;
                  GDmapPosition.province = result.addressComponent.province;
                  GDmapPosition.city = result.addressComponent.city;
                  GDmapPosition.cityCode = result.addressComponent.citycode;
                  GDmapPosition.cityCode = $.cityFormat(CGDmapPosition.cityCode);//$.cityFormat:地圖cityCode轉(zhuǎn)項目業(yè)務(wù)的cityCode編碼
                  GDmapPosition.district = result.addressComponent.district;
                    GDmapPosition.address = result.formattedAddress;
              } else {
                  GDmapPosition.ststus = '0';
                  GDmapPosition.lng = '';
                  GDmapPosition.lat = '';
                  GDmapPosition.province = '';
                  GDmapPosition.city = 'XX市';
                  GDmapPosition.cityCode = '';
                  GDmapPosition.district = '';
                  GDmapPosition.address = '定位失敗-默認(rèn)地市';
             }
             $.store.set('CGDmapPosition', CGDmapPosition);//存儲定位信息
             if(GDmapPosition.ststus == "1"){
                $("#position").text(GDmapPosition.city + GDmapPosition.district);
                isMapSuccess = 1;
             } else {
                $("#position").text("定位失敗");
                isMapSuccess = 0;
            }
        });
    });
}

—3.2 定位失敗跳轉(zhuǎn)手動定位頁面

——3.2.1 map頁-HTML：
<body>
    <div class="map-search">
        <input id="mapSearch" type="text" placeholder="請輸入關(guān)鍵字或點擊地圖">
    </div>
    <div id="map" class="map"></div>
    <div id="mapSelect" class="map-select"></div>
    <div class="map-btn">
        <a class="btn" href="javascript:beOk()">確認(rèn)</a>
    </div>
</body>
——3.2.1 map頁-js：
$(function(){
    $.GDMapLoad("GDMapInit");
});
/**
 * 高德地圖初始化
 */
var map;
var geocoder;
var marker;//標(biāo)點
function GDMapInit(){
    map = new AMap.Map("map", {
        resizeEnable: true
    });
    AMap.plugin('AMap.Geocoder', function() {//異步加載地理編碼與逆地理編碼服務(wù)插件
        geocoder = new AMap.Geocoder();
    });
    map.on('click', clickGetPosition);
    keySearch();//初始化搜索框
    doNewPosition();//重新定位
}
/**
 * 關(guān)鍵字檢索
 */
function keySearch(){
    AMap.plugin('AMap.Autocomplete', function(){
        var mapSearch = new AMap.Autocomplete({
            input: "mapSearch",//支持傳入輸入框DOM對象的id值，或直接傳入輸入框的DOM對象。
        });
        AMap.event.addListener(mapSearch, "select", keySearchSelect);//注冊監(jiān)聽，當(dāng)選
    });
}
/**
 * 關(guān)鍵字檢索返回
 */
function keySearchSelect(result){
    var lng = result.poi.location.lng;
    var lat = result.poi.location.lat;
    setMarker(lng , lat);//設(shè)置標(biāo)點
}
/**
 * 重新獲取定位(https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation)
 */
function doNewPosition(){
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默認(rèn):true
            timeout: 10000,          //超過10秒后停止定位，默認(rèn)：5s
            showMarker: false        //是否顯示定位點
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    });
}
/**
 * 定位成功后執(zhí)行參數(shù)
 */
function onComplete(result){
    setMarker(result.position.lng , result.position.lat);
}
/**
 * 設(shè)置marker，定義標(biāo)點(https://lbs.amap.com/api/javascript-api/reference/overlay#marker)
 */
function setMarker(lng , lat){
    map.setCenter([lng , lat]);//設(shè)置地圖中心位置
    if(!marker){
        map.setZoom(15);
        marker = new AMap.Marker({
            position: [lng , lat],
        });
    }else{
        marker.setPosition([lng , lat]);//setPosition(lnglat:[LngLat])設(shè)置點標(biāo)記位置
    }
    marker.setMap(map);//為Marker指定目標(biāo)顯示地圖
    lnglatFormat(lng , lat);//經(jīng)緯度重新解析，給搜索框賦值
}
/**
 * 經(jīng)緯度解析
 */
var GDmapPositionNew;//存儲搜索結(jié)果或點擊地圖定位信息
function lnglatFormat(lng , lat){
    var $mapSelect = $("#mapSelect")
    geocoder.getAddress([lng , lat], function(status, result) {
        if(status === 'complete' && result.info === 'OK' && result.regeocode) {
            GDmapPositionNew= {};
            GDmapPositionNew.ststus = "1";
            GDmapPositionNew.lng = lng;
            GDmapPositionNew.lat = lat;
            GDmapPositionNew.province = result.regeocode.addressComponent.province;
            GDmapPositionNew.city = result.regeocode.addressComponent.city;
            GDmapPositionNew.cityCode = result.regeocode.addressComponent.citycode;
            GDmapPositionNew.cityCode = $.cityFormat(CGDmapPositionNew.cityCode);
            GDmapPositionNew.district = result.regeocode.addressComponent.district;
            GDmapPositionNew.address = result.regeocode.formattedAddress;
            $mapSelect.text(GDmapPositionNew.address);
        }else{
            GDmapPositionNew= false;
            $mapSelect.text("");
        }
    });
}
/**
 * 確認(rèn)
 */
function beOk(){
    var cbBack = $.decode($.getUrlParam("cbBack"));
    if(GDmapPositionNew){//重新設(shè)置新的地理位置
        $.store.set("CGDmapPosition" , GDmapPositionNew);
    }
    $.gotoLink(cbBack);
}

4結(jié)尾

還有很多功能可以自定義，官方API 參考手冊

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容