引入高德地图 vue-amap

---

前言

引入高德地图 vue-amap

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、npm 安装 vue-amap

npm install vue-amap --save

二、使用步骤

1.man.js 文件

注意: key 和 securityJsCode 是在 高德开放平台-控制台-应用管理-我的应用 申请的,请改成自己的

//引入高德地图
import VueAMap from 'vue-amap'

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
    key: 'dd5dfd30352db121a10a210f0b4dac2b',
    plugin: ['AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PolyEditor',
        'AMap.CircleEditor',
        'AMap.Geocoder'
    ],
    // 默认高德 sdk 版本为 1.4.4
    v: '1.4.4'
})

window._AMapSecurityConfig = {
    securityJsCode: '14be285dd85261f9622165e06f8de6b5'
}

2.基本使用

代码如下（示例）：

<template>
   <div class="amap-wrapper">
        <el-amap class="amap-box" vid="amap-vue" :zoom="7" :events="events"
        :plugin="plugin" mapStyle="amap://styles/whitesmoke">
          <el-amap-marker
              class="amap-marker"
              v-for="(item,index) in markersList" :key="'index"
              :position="item.position" :icon="item.icon" :extData="item">
          </el-amap-marker>
        </el-amap>
  </div>
</template>
<script>
var that
var Geocoder; //先声明变量，
export default {
  data() {
    return {
    //事件
      events: {
        // 点击marker
        click(e, x) {
          const temp = e.target.getExtData()
 		  console.log("点击marker",temp)
          let markerPosition = [e.lnglat.lng, e.lnglat.lat];
          //根据坐标获取位置
          Geocoder.getAddress(markerPosition, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              that.address = result.regeocode.formattedAddress
              that.$refs.searchBox.keyword = that.address
            }
          });
          //根据位置获取坐标
          Geocoder.getLocation("北京市东城区东华门街道菖蒲河沿菖蒲河公园", function (status, result) { 
             console.log("result",result)
          });
        }
      },
      //插件
      plugin: [
        {
          pName: "Geocoder", //使用AMap.Geocoder插件
          events: {
            init(o) {
              Geocoder = o;
            },
          },
        },
      ],
      //标点
      markersList: [],
    }
  },
  created() {
    that = this
  },
}
</script>

---

总结

vue-amap 的开发文档很烂,部分功能可以参考
https://lbs.amap.com/api/jsapi-v2/summary