使用高德地图API：1、让地图上始终只有一个 Marker 点标记。2、使用逆向地理编码插件，把经纬度转为地址。3、根据输入关键字提示匹配信息和地点搜索服务。4、创建实时路况图层。

<template>
  <div>
    <el-button type="primary" size="mini" @click="openMap">打开地图</el-button>
    <!--地图弹框-->
    <el-dialog title="地图弹框" :visible.sync="mapDialog" width="50%" @opened="createMap">
      <div id="tip">
        <input id="keyword" type="text" name="keyword" value="请输入关键字：(选定后搜索)" onfocus="this.value=''">
      </div>
      <div id="map-container" style="width: 100%;height: 500px; margin-top: -30px;" />
      <div style="margin-top: 10px">
        <div>当前经纬度: <span style="color: #1482f0">{{ location }}</span></div>
        <div style="margin: 10px 0;">当前位置: <span style="color: #1482f0">{{ this.formData.detailAddress }}</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMap from 'AMap'

export default {
  data() {
    return {
      formData: { detailAddress: '', longitude: '', latitude: '', location: '' }, mapDialog: false
    }
  },
  computed: {
    location() {
      return this.formData.longitude && this.formData.latitude ? this.formData.longitude + ',' + this.formData.latitude : null
    }
  },
  methods: {
    openMap() {
      this.mapDialog = true
      this.createMap()
    },
    createMap() { // 创建地图
      const _this = this
      const markers = []
      const map = new AMap.Map('map-container', { // 创建Map地图实例
        resizeEnable: true, // 是否监控地图容器尺寸变化
        center: [106.628831, 26.645246], // 初始地图中心点
        zoom: 10 // 初始化地图显示的缩放级别
      })

      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() { // 引入输入提示[根据输入关键字提示匹配信息]插件(AMap.Autocomplete)和POI搜索[地点搜索服务插件，提供某一特定地区的位置查询服务]插件(AMap.PlaceSearch)
        const autocomplete = new AMap.Autocomplete({ // 将input输入的值传入到Autocomplete输入提示插件中
          city: '全国', // 输入提示时限定城市，默认全国，支持传入格式有：城市名、citycode和adcode
          input: 'keyword' // 用来指定一个input输入框，设定后，在input输入文字将自动生成下拉选择列表。支持传入输入框DOM对象的id值，或直接传入输入框的DOM对象
        })
        const placeSearch = new AMap.PlaceSearch({ // 将input输入的值传入到Autocomplete POI搜索插件中
          city: '全国', // 指定搜索所在城市，默认全国，支持传入格式有：城市名、citycode和adcode
          map: map // AMap.Map对象，展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上
        })
        AMap.event.addListener(autocomplete, 'select', function(e) { // 选择提示插件给出的提示后，在地图上进行相应定位并得到相应的值
          // 针对选中的poi实现自己的功能
          placeSearch.setCity(e.poi.adcode)
          placeSearch.search(e.poi.name)
          _this.formData.longitude = e.poi.location.lng
          _this.formData.latitude = e.poi.location.lat
          _this.formData.detailAddress = e.poi.district + e.poi.name + e.poi.address
        })
      })

      const trafficLayer = new AMap.TileLayer.Traffic({ // 创建实时路况图层
        zIndex: 10
      })
      map.add(trafficLayer) // 添加并显示实时路况图层到地图
      // trafficLayer.setMap(map) // 添加实时路况图层到地图
      // trafficLayer.show() // 显示实时路况图层到地图

      map.on('click', function(e) { // 点击地图进行的触发操作
        _this.formData.longitude = e.lnglat.getLng()
        _this.formData.latitude = e.lnglat.getLat()

        AMap.plugin('AMap.Geocoder', function() { // 引入 Geocoder 逆向地理编码插件，把经纬度转为地址
          const geocoder = new AMap.Geocoder({
            radius: 1000, // 以给定坐标为中心点，单位：米。取值范围：0-3000。默认值：1000
            extensions: 'base' // 返回信息的详略。默认值：base，返回基本地址信息；取值为：all，返回地址信息及附近poi、道路、道路交叉口等信息
          })
          const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]
          geocoder.getAddress(lnglat, function(status, result) { // 传入经纬度，根据给定坐标进行解析，把经纬度转为地址
            if (status === 'complete' && result.info === 'OK') {
              _this.formData.detailAddress = result.regeocode.formattedAddress // result为对应的地理位置详细信息
            }
          })
        })

        map.remove(markers) // 移除地图上已创建的点标记
        const marker = new AMap.Marker({ // 创建 Marker 点标记
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 点标记在地图上显示的位置，默认为地图中心点
          title: '当前位置' // 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示
        })
        markers.push(marker) // 将marker标注用markers数组存起来，便于移除上次点击地图产生的点标记
        map.add(marker) // 将创建的点标记添加到已有的地图
      })
    }
  }
}
</script>

<style>
  #tip {
    background-color: #ddf;
    color: #333;
    border: 1px solid silver;
    box-shadow: 3px 4px 3px 0px silver;
    position: absolute;
    top: 60px;
    right: 30px;
    border-radius: 5px;
    overflow: hidden;
    line-height: 30px;
    z-index: 1;
  }
  #tip input[type="text"] {
    height: 30px;
    border: 0;
    padding-left: 5px;
    width: 280px;
    border-radius: 3px;
    outline: none;
  }
  .amap-sug-result {
    z-index: 9999;
  }
</style>

 

点击打开地图按钮，弹出显示页面

随便点击地图上的一点，得到经纬度与地址

 根据输入的关键字提示匹配信息

选择其中一个提示信息，得到经纬度与地址