1.首先在index.html引入高德地圖的秘鑰。如圖：

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到松嶺網(wǎng)站設(shè)計(jì)與松嶺網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋松嶺地區(qū)。

注意：如果使用關(guān)鍵字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch，否則功能無(wú)法使用，并會(huì)報(bào)錯(cuò)
2. 定位功能，代碼如下：

const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) // 創(chuàng)建Map實(shí)例
   const options = {
    'showButton': true, // 是否顯示定位按鈕
    'buttonPosition': 'LB', // 定位按鈕的位置
    'buttonOffset': new AMap.Pixel(10, 20), // 定位按鈕距離對(duì)應(yīng)角落的距離
    'showMarker': true, // 是否顯示定位點(diǎn)
    'showCircle': true, // 是否顯示定位精度圈
    'circleOptions': {// 定位精度圈的樣式
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true // 定位成功后是否自動(dòng)調(diào)整地圖視野到定位點(diǎn)
   }
   AMap.plugin(['AMap.Geolocation'], function() {
    const geolocation = new AMap.Geolocation(options)
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
   })
   //下面是點(diǎn)擊地圖時(shí)加入mark。注意：要在綁定事件前記錄this，否則在綁定的回調(diào)方法中使用this將是該事件的this
   const _this = this
   AMap.event.addListener(map, 'click', function(e) {
    map.clearMap() // 清除地圖上所有添加的覆蓋物
    new AMap.Marker({
     position: e.lnglat,
     map: map
    })
    _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
   })

標(biāo)題名稱：vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))-創(chuàng)新互聯(lián)
文章來(lái)源：http://weahome.cn/article/dppgoi.html