地图选点功能

在详设阶段，需要实现地图选点，这个自己之前从来没有实现过，现在来实现一下，这个过程中参考了高德地图的官方开发文档和vue-amap文档，地址链接分别如下：

高德地图官方文档：

https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

vue-amap文档：

https://elemefe.github.io/vue-amap/#/zh-cn/services/searchbox

然后自己写了一个基础示例：

实现代码如下：

<template>
  <div class="myIndexWrap">
    <div class="mapWrap">
      <h3>地图选点</h3>
      <div class="addrWrap">
        <input type="text" v-model="address" style="width:400px;" />
        <img src="@/assets/mapIcon.png" @click="showMap = !showMap" />
        
        <GaodeMap
          v-show="showMap"
          class="mapBox"
          @selectedAddr="selectedAddr"
        />
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import GaodeMap from "@/components/GaodeMap.vue";

export default {
  components: {
    GaodeMap
  },
  data() {
    return {
      showMap: true,
      address: ""
    };
  },
  mounted() {},
  methods: {
    //地图选址功能
    selectedAddr(data) {
      this.address = data.formattedAddress;
    }
  }
};
</script>

<style lang='scss' scoped>
.myIndexWrap {
  width: 1200px;
  min-height: 800px;
  height: auto;
  border: 1px solid #000;
  display: flex;
  flex-flow: column;
  
  .addrWrap {
    display: flex;
    flex-wrap: row;
    input {
      width: 200px;
      height: 30px;
      margin-left: 20px;
    }
    img {
      width: 30px;
      height: 30px;
    }
    .mapBox {
      margin-left: 50px;
      margin-bottom: 100px;
    }
  }
}
</style>

GaodeMap.vue

<template>
  <div class="amap-wrapper">
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <el-amap
      vid="amapDemo"
      :zoom="zoom"
      class="amap-demo"
      :plugin="plugin"
      :events="events"
    >
      <el-amap-marker
        v-for="(marker,index) in markers"
        :key="index"
        :position="marker"
      ></el-amap-marker>
    </el-amap>
    <div class="toolbar">
      position: [{{ lng }}, {{ lat }}] address: {{ address }}
    </div>
  </div>
</template>


<script type='text/ecmascript-6'>
import Vue from "vue";
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  //高德的key
  key: "cc644a48b701c256e9a827f068743fdd",
  // 插件集合
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
    "AMap.Geolocation",
    "AMap.Geocoder",
    "AMap.AMapUI"
  ],
  v: "1.4.4",
  uiVersion: "1.0.11" // 版本号
});
export default {
  components: {},
  data() {
    let self = this;
    self.city = self.city || "南京";
    return {
      zoom: 12,
      // center: [121.59996, 31.197646],
      address: "",
      // 在全国范围内搜索地址
      searchOption: {
        city: "全国",
        citylimit: true
      },
      markers: [
        [121.59996, 31.197646],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      plugin: [
        {
          pName: "ToolBar",
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        }
      ],
      events: {
        init(map) {
          
        },
        click: e => {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log('地址==>',result.regeocode)
                self.address = result.regeocode.formattedAddress;
                let province = result.regeocode.addressComponent.province;
                let city     = result.regeocode.addressComponent.city;
                let area     = result.regeocode.addressComponent.district;
                let street   = result.regeocode.addressComponent.township;
                self.$nextTick();
                // 将拿到的地址通过emit方式发送给父组件，回显数据
                let address = {
                  province:province,
                  city:city,
                  area:area,
                  street:street,
                  formattedAddress:self.address
                };
                self.$emit('selectedAddr',address);
              }
            }
          });
        }
      },
      lng: 0,
      lat: 0
    };
  },
  mounted() {},
  methods: {
    onSearchResult(pois) {
      this.markers = [];
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.mapCenter = [center.lng, center.lat];
      }
    },
    // 将搜索出来的结果添加标记
    addMarker: function() {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
      this.markers.push([lng, lat]);
    }
  }
};
</script>

<style lang='scss' scoped>
.amap-wrapper {
  width: 800px;
  height: 500px;
  border: 1px solid #666;
  background:rgb(207, 203, 203);
}
</style>

在实现上述代码之前，需要先安装插件vue-amap,

npm install vue-amap --save

在安装的过程中，遇到了一些问题，但是还好，通过提示以及百度都解决了。

在上述代码中，我们也可以把GaodeMap.vue中的关于VueAMap的引用放到main.js中：

如下：

main.js文件