高德搜索定位，獲取信息

     效果圖：

    

代碼：

<script>
export default {

name: 'map-show',
  data () {
    return {
      map: null,
　　　 dataRes: {}

    }
  },
  mounted () {
    this.initMap()
  },

  methods: {
    // 實例化地圖
    initMap () {
      const AMap = window.AMap
      this.map = new AMap.Map('container', {
        resizeEnable: true,
　　　　　zoom: 12,
　　　　　center: [120.204388,30.244759]
      })
    },// 輸出數據
    output(name) {
　　　　// name為字符串，'北京'、'上海'、'杭州' // 位置聯想搜索,並標記
      let that = this
      const AMap = window.AMap
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'],function(){
        let autoOptions = {
          city: name, // 城市，默認全國
          input: 'keyword' // 使用聯想輸入的input的id
        }
        let autocomplete= new AMap.Autocomplete(autoOptions)
        const placeSearch = new AMap.PlaceSearch({
          city: name,
          map: new AMap.Map('container', {
            resizeEnable: true
          })
        })
        AMap.event.addListener(autocomplete, 'select', function(res) {
          const data = res.poi
 // 組合需要的數據
          that.dataRes = {
            location: data.location.lng + ',' + data.location.lat,
            address: data.name,
            addressDetail: data.district + '' + data.address
          }
          // 搜索
          placeSearch.search(data.name)
        })
      })
    }
  }
}
</script>

<style>
// 設置權重值，使搜索下拉選項不被隱藏
.amap-sug-result {
  z-index: 9999 !important;
}
</style>