vue使用vue-amap 高德地图进行选点和搜索

1. vue使用vue-amap进行地图点的搜索和点击选点

npm install vue-amap --save //下载npm 包

2. 在main.js主文件中进行引用

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

VueAMap.initAMapApiLoader({
  key: "XXXXXXXXXXXXXXXXXX",//高德开放平台申请的key值
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.Geocoder", // 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 根据需求选用
  ],
  uiVersion: "1.0", // 地图ui版本
  v: "1.4.4", // amap版本
});

3. 在vue文件中进行使用

 <el-form-item label="" prop="address">
          <el-amap-search-box class="search-box" :default="defaultValue" :search-option="searchOption" :on-search-result="onSearchResult">
          </el-amap-search-box>
          <el-amap ref="map" vid="amapDemo" :events="events" :center="center" :zoom="zoom" class="amap-demo">
            <el-amap-marker :position="center" key="100"></el-amap-marker>
          </el-amap>
        </el-form-item>


export default {
  data() {
    let _this = this;
    return {
      zoom: 18,
      center: [118.02, 24.48],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      defaultValue: "",
      content: "",
      inputValue: "",
      searchResult: {
        address: "",
        latitude: "",
        longitude: "",
        name: "",
        type: "",
        country: "",
        province: "",
        city: "",
        area: "",
        township: "",
        street: "",
        neighborhood: "",
        locationName: "",
      },

      events: {
        click(e) {
          _this.center = [e.lnglat.lng, e.lnglat.lat];
          _this.form.lon = e.lnglat.lng;
          _this.form.lat = e.lnglat.lat;
          _this.getAddress(_this.center);
          _this.defaultValue = "";
        },
      },
    };
  },
  methods: {
    onSearchResult(pois) {
      //搜索
      let latSum = 0;
      let lngSum = 0;
      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.zoom = 18;
        that.content = poi.name;
        that.searchResult.address = poi.address;
        that.searchResult.latitude = poi.lat;
        that.searchResult.longitude = poi.lng;

        that.form.lon = lng;
        that.form.lat = lat;

        that.getAddress(that.center);
      } else {
        that.searchResult = [];
      }
    },

    // 获取详细地址
    getAddress(center) {
      let _this = this;
      let 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.form.address = locationName;
        }
      });
    },
  },
};

4. 效果图如下

​