高德搜索定位,获取位置信息

<template>
  <div class="mapShow">
    <div class="selectCity">
      <el-select v-model="location" placeholder="选择城市">
        <el-option
          v-for="item in cityOption"
          :key="item.label"
          :label="item.name"
          :value="item.label">
        </el-option>
      </el-select>
      <input :disabled="form.location === ‘‘" class="el-input__inner" type="text" id="keyword" name="keyword" placeholder="请输入内容"/>
      <el-button type="warning" plain :disabled="isDisabled" @click="dataChange">确定</el-button>
    </div>
    <div id="container" class="map"></div>
  </div>
</template>

<script>
import { fetchApi } from ‘@/api/getData‘

export default {
  name: ‘map-show‘,
  data () {
    return {
      map: null,
      location: ‘‘,

      dataRes: {},
      isDisabled: true
    }
  },
  mounted () {
    this.initMap()
  },
  watch: {
　　 // 搜索城市切换　　
    location: function (name) {
      this.output(name)
    }
  },
  methods: {
    // 实例化地图
    initMap () {
      const AMap = window.AMap
      this.map = new AMap.Map(‘container‘, {
        resizeEnable: true,
　　　　　zoom: 12,
　　　　　center: [120.204388,30.244759]
      })
    },// 输出数据
    output(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
          }
          that.isDisabled = false
          // 搜索
          placeSearch.search(data.name)
        })
      })
    },
    // 给父组件传值,输出数据
    dataChange() {
      this.$emit(‘on-data-change‘, this.dataRes)
    }
  }
}
</script>

<style>
.mapShow {
  height: 600px;
}
.map {
  width: 100%;
  height: 550px;
  margin-top: 10px;
}
#keyword {
  width: 200px;
  height: 40px;
  margin: 0 20px;
  color: #606266;
}
// 搜索下拉选项,使其不被隐藏
.amap-sug-result {
  z-index: 9999 !important;
}
</style>