vue2+electron+amap高德地图实现地址转换坐标

本文链接：https://blog.csdn.net/jill12/article/details/130176421

该文章展示了如何在Vue应用中集成和配置VueAMap插件，包括初始化各种地图功能如输入提示、POI搜索、编辑工具等。同时，文中还提到了子组件map.vue的实现，用于显示和编辑地图标记，以及父组件如何调用地图组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js

import VueAMap from 'vue-amap';
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "00b1e730aa6e6e46b0a2a9e783fcc79d",
  plugin: [
      "AMap.Autocomplete", //输入提示插件
      "AMap.PlaceSearch", //POI搜索插件
      "AMap.Scale", //右下角缩略图插件 比例尺
      "AMap.OverView", //地图鹰眼插件
      "AMap.ToolBar", //地图工具条
      "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      "AMap.PolyEditor", //编辑 折线多，边形
      "AMap.CircleEditor", //圆形编辑器插件
      "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
      "AMap.Geocoder",
      "AMap.CitySearch",
  ],
  // 默认高德 sdk 版本为 1.4.4
    v:'1.4.15',
  uiVersion: '1.0' // 版本号
});
// Vue.config.productionTip = false
// 生产环境 后台配置的安全密钥地址 详见官方配置文件
window._AMapSecurityConfig = {
    securityJsCode:'41b040b409e5a8ff20ff5f2e04ff912f',
}
// 解决高德地图刷新显示不出来
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => { localStorage.removeItem(key) })

子组件map.vue

<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap  class="amap-box"
               :center="center"
               :isOpen="true"
               :zoom="zoom"
               :rotateEnable="true"
               :visible="true"
               :vid="'amap-vue'"
      >
        <el-amap-marker ref="marker"
                        :position="center"
                        v-for="(marker,index) in markers"
                        :key="index"
                        :draggable="true"
                        :offset="marker.offset"
                       >
        </el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
import {ip2Address} from '../api/login'
export default {
  data () {
    return {
      markers:[{
        offset:[0,0],
        position:[106.53731,29.403297],
      }],
      center:[106.537362,29.403297],
      zoom:15,
    }
  },
  created() {
  },
  methods:{
    map(locationArr){
      console.log(locationArr,'12312locationArr')
      this.center = locationArr
      // this.$refs.marker[0].setPosition(locationArr)
      this.markers.position = locationArr
    },
    getLocation(address) {
      // console.log('address',address)
      const geocoder = new AMap.Geocoder({
        city: '全国' // 城市设为北京，默认：“全国”
      })
      geocoder.getLocation(address, (status, result) => {
        // console.log('status',status)
        // console.log('result',result)
        if (status === 'complete' && result.geocodes.length) {
          const lnglat = result.geocodes[0].location
          this.center = [lnglat.lng,lnglat.lat]
          this.markers.position = [lnglat.lng,lnglat.lat]
          this.$emit('getloction',lnglat.lng,lnglat.lat)
        } else {
          console.error('根据地址查询位置失败')
        }
      })
    },
  },
}
</script>

<style>
.amap-wrapper {
  height: inherit;
}
</style>

父组件调用

<Lxamp @map="map" class="Lamp" ref="addgdMap" @getloction="getloction"></Lxamp>

import Lxamp from "../../components/map.vue";
export default {
components: {Lxamp,},
data() {
    return {
	}
}
}