vue高德地图（vue-amap）

1、安装高德地图插件

npm install vue-amap

2、引入

import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

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

3、使用

<template>
  <div>
    <div class="amap-wrapper">
      <!-- 搜索控件 -->
      <el-amap-search-box
        class="search-box"
        :default="keyword"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      >
      </el-amap-search-box>
      <!-- 地图 -->
      <el-amap
        class="amap-box"
        :vid="'amap-vue'"
        :center="center"
        :plugin="plugin"
        :zoom="zoom"
      >
        <!-- marker坐标点(标记点) -->
        <el-amap-marker :position="center"> </el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      keyword: "",
      zoom: 15, //缩放级别
      center: [120.9909, 31.398754],
      plugin: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: "RB", // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: "all",
          pName: "Geolocation",
        },
      ],
    };
  },

  watch: {},

  async mounted() {},

  methods: {
    onSearchResult(pois) {
      let that = this;
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0];
        let lng = poi["lng"];
        let lat = poi["lat"];
        that.center = [lng, lat];
        that.getAddress(that.center);
      }
    },
    // 获取详细地址(逆解析)
    getAddress(center) {
      let _this = this;
      let geocoder;
      AMap.plugin("AMap.Geocoder", function () {
        geocoder = new AMap.Geocoder({});

        geocoder.getAddress(center, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            let obj = result.regeocode.addressComponent;

            let locationName =
              obj.province +
              obj.city +
              obj.district +
              obj.township +
              obj.street +
              obj.streetNumber;

            // _this.addAndEditFormData.address = locationName;
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.amap-wrapper {
  width: 500px;
  height: 300px;
  margin-bottom: 50px;
  margin-top: 20px;
}

::v-deep .search-box-wrapper {
  border: 1px solid gray;
}
::v-deep .el-vue-search-box-container {
  margin-bottom: 20px;
  width: 300px;
}
</style>

官网地址

https://elemefe.github.io/vue-amap/#/