快捷導(dǎo)航

vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))

更新時(shí)間：2020年03月07日 12:33:56 作者：MrsTing

這篇文章主要介紹了vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼，也是小編踩了無(wú)數(shù)坑總結(jié)出來(lái)的經(jīng)驗(yàn),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

在這里插入圖片描述

注意：如果使用關(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())
   })

3.關(guān)鍵字搜索功能
html部分代碼（注意ref,id,class的名字要和官網(wǎng)保持一致，否則可能出不來(lái)想要的效果）：

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>請(qǐng)輸入關(guān)鍵字：</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

script代碼：

export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   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)
   }
   //注意：要在綁定事件前記錄this，否則在綁定的回調(diào)方法中使用this將是該事件的this
   const _this = this
   // 輸入提示
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) // 構(gòu)造地點(diǎn)查詢(xún)類(lèi)
   AMap.event.addListener(auto, 'select', this.select)// 注冊(cè)監(jiān)聽(tīng)，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
   //點(diǎn)擊搜索出的mark點(diǎn)事件
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) // 關(guān)鍵字查詢(xún)查詢(xún)
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

整體完成代碼：

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>請(qǐng)輸入關(guān)鍵字：</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

<script>
export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   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()
   })
   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())
   })

   // 輸入提示
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) // 構(gòu)造地點(diǎn)查詢(xún)類(lèi)
   AMap.event.addListener(auto, 'select', this.select)// 注冊(cè)監(jiān)聽(tīng)，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) // 關(guān)鍵字查詢(xún)查詢(xún)
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

<style scoped>
  .map-chart{
    position: relative;
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
  }
  /deep/ .amap-logo,/deep/ .amap-copyright {
    display: none!important;
  }

  #container {
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
    z-index: 99999999;
  }

  .button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
  }

  .button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  .button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  #tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
  }
  .amap-info-content {
    font-size: 12px;
  }
  #myPageTop {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding:6px;
    font-family: "Microsoft Yahei", "微軟雅黑", "Pinghei";
    font-size: 14px;
    z-index: 99999999;
  }
  #myPageTop label {
    margin: 0 20px 0 0;
    color: #666666;
    font-weight: normal;
  }
  #myPageTop input {
    width: 170px;
  }
  #myPageTop .column2{
    padding-left: 25px;
  }
</style>

由于我在項(xiàng)目中使用了dialog,搜索出來(lái)的結(jié)果會(huì)在蒙版后面顯示，去掉scope和加/deep/、>>>都沒(méi)用，最后在index.html加樣式。代碼如下：

<style type="text/css">
  .amap-sug-result {
   z-index: 2999!important;
  }
 </style>

效果：

在這里插入圖片描述

以上就是踩了無(wú)數(shù)坑總結(jié)出來(lái)的經(jīng)驗(yàn)。。。

到此這篇關(guān)于vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))的文章就介紹到這了,更多相關(guān)vue 高德地圖定位搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: