高德地图 -＞选点,地址搜索,坐标逆解析

1. 安装 高德依赖  vue-amap文档

npm install vue-amap -S

2. 组件引入及注册

将下方 AMapPoint 压缩包解压放到 /src/components 目录下。

import AMapPoint from '@/components/AMapPoint'
Vue.component('AMapPoint', AMapPoint)

3. 从 2021 年后生成的地图 key 需要配合安全密钥使用

注：一定要写在 项目主页的 html 文件中, 优先加载

<script>
  //安全秘钥
  window._AMapSecurityConfig = { securityJsCode: 'acd8d9c9a33317d9b12ae04395ea3162' }
</script>

 4. key 秘钥写在组件中，自行酌情更换

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap 并修改 高德地图的 key
VueAMap.initAMapApiLoader({
  key: '6c7f35c799d7b4adc91bbd726ca42deb', // 这里写你申请的高德地图的key可以去https://console.amap.com/申请key
  plugin: ['AMap.Autocomplete', 'AMap.Geocoder', 'AMap.Geolocation'],
  v: '1.4.15',
  uiVersion: '1.1',
})

5. demo 使用

注：一定要给放地图的容器一个高度

<template>
  <div style="height: 500px">
    <AMapPoint :lng="lng" :lat="lat" @complete="complete"></AMapPoint>
  </div>
</template>

<script>
import AMapPoint from '@/components/AMapPoint'
export default {
  name: 'AMapView',
  components: {
    AMapPoint,
  },
  data() {
    return {
      lng: 119.233231, // 经度
      lat: 34.603809, // 纬度
    }
  },
  methods: {
    complete(e) {
      console.log('点位信息: ', e)
    },
  },
}
</script>

6. 组件说明

❤️ 组件接收的 属性有

props: {
  // 经度
  lng: { type: Number, default: 0 },
  // 纬度
  lat: { type: Number, default: 0 },
  // 是否禁用 仅展示点位
  disabled: { type: Boolean, default: false },
  // 是否显示版权
  isCopyRight: { type: Boolean },
},

❤️❤️ 组件监听的 事件有

methods: {
  complete(e) {
    console.log('点位信息: ', e)
  },
},

❤️❤️❤️如果编辑器的 eslit 对 AMap AMapUI 报错

可在 eslitrc.js 中添加

  globals: {
    // 去除高德地图全局构造函数的检查
    AMap: false,
    AMapUI: false,
  },

在 vue.config.js 中 添加全局变量

configureWebpack: {
    externals: {
      AMap: 'AMap', // 加这个！！
      AMapUI: 'AMapUI',
    },
  },