vue2+vue-amap 鼠标点击地图获取对应地址

子组件

html

<template>
  <div id="amapcontainer"></div>
</template>

js

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '7a098xxxxxxxxxxxxx1cd8b' // '「申请的安全密钥」',更换成自己的
}
export default {
  data () {
    return {
      map: null, //地图示例
      addr:'' //地址解析之后的地址值
    }
  },
  mounted () {
    // DOM初始化完成进行地图初始化
    this.initAMap()
  },
  methods: {

    initAMap () {
      let that = this
      AMapLoader.load({
        key: "141fxxxxxxxxxxxxxxxxxxxxxx91c", // 申请好的Web端开发者Key，首次调用 load 时必填 更换成自己的的
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete'], // 需要使用的的插件列表
      }).then((AMap) => {
        // 获取到作为地图容器的DOM元素，创建地图实例
        this.map = new AMap.Map("amapcontainer", { //设置地图容器id
          resizeEnable: true,
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放，默认值为true
          dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
          doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
          zoom: 14, //初始化地图级别
          center: [123.918193,47.354892], // 初始化中心点坐标
          //mapStyle: "amap://styles/darkblue", // 设置颜色底层
        })
        // 地图点击事件，点击获取经纬度;
        this.map.on("click", (e) => {
          // 获取经纬度
          //console.log('map click', e, e.lnglat.getLng(), e.lnglat.getLat());
          let Clnglat = [e.lnglat.getLng(),e.lnglat.getLat()]
          let geocoder = new AMap.Geocoder({radius: 1000});
          //根据坐标获取位置  将经纬度 转换后成 地址信息 放在父组件的input value属性展示
          geocoder.getAddress(Clnglat,function (status, result) {
            if (status === "complete" && result.info === "OK") {
              //console.log(result.regeocode.formattedAddress)
              that.addr = result.regeocode.formattedAddress;
              that.$emit('childByValue', that.addr)            }
          })
        })
      }).catch(e => {
        console.log(e) //错误处理
      })
    }
  }
}
</script>

css

<style>
#amapcontainer {
  width: 750px;
  height: 400px; /*设置地图容器高度 必须 否则不显示*/
}
</style>

父组件

html

<template>
      <div class="addr"><div>地址：</div>
        <div>
          <el-input :rows="1" style="width: 600px" type="input" class="article-input" v-model="childValue" placeholder="请在地图上点选起点位置" />
        </div>
      </div>
      <div id="map">
        <map-container v-on:childByValue="childByValue" style=" height: 400px;width: 750px;"></map-container>
      </div>
  </div>
</template>

js

<script>
import MapContainer from "@/components/amap.vue";
export default {
  name: 'Demo',
  components: { MapContainer },
  data() {
    return {
      childValue:''
    }
  },
  methods: {
    childByValue: function (childValue) {
      // childValue就是子组件传过来的值
       this.childValue = childValue
    }
  }
}
</script>

css

<style>
.addr{
  margin: 20px 0px;
  display: flex;
  flex-direction: row;
}

.addr div{
  height: 33px;
  line-height: 33px;
}

#map{
  height: 400px;
  width: 750px;
}
</style>

完整源码下载请点击 源码编号：001