vue中使用vue amap组件调用高德地图

vue中使用vue amap组件调用高德地图：
通过标签的方式
附上文档：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
(1)、地图安装及显示
1、npm install vue-amap --save
2、在main.js中初始化高德地图

import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请高德的key
    key: 'key',
    // 插件集合 （插件按需引入）
    plugin: ['AMap.Autocomplete','AMap.Geolocation','Geocoder', 'AMap.PlaceSearch', 'AMap.Marker', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
  });

3、下面我们把地图先渲染到DOM上
zoom为地图的缩放等级取值范围3-18移动端取值3-19
plugin为地图的基本配置
center是地图的中心点[经度，纬度]
events是地图的事件

<!--地图显示-->
<el-amap vid="amapDemo" :zoom="zoom" :plugin="plugin"
 :center="center" :clickable="enableclick" 
 :events="markerEvents">
</el-amap>

(1)、地图的基本配置

zoom: 4,
center: [116.397428, 39.909232],
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, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: "all",
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  console.log("本地坐标为：" + [self.lng, self.lat]);
                  self.center = [self.lng, self.lat];
                  self.loaded = true;
                  self.address = result.formattedAddress;
                  //此处为本地坐标显示在坐标上方的文字
                  html代码如下↓
                   <el-amap-text :text="texts.text" :offset="texts.offset" :position="texts.position">
                   </el-amap-text>
                   offset为偏移量；取值方式为数组形式:[5，-30]
                   js代码↓
                  self.texts.position = [self.lng, self.lat];
                  self.texts.text = "我在 " + result.formattedAddress + " 附近";
                  // console.log(self.address)
                  self.$nextTick();
                }
              });
            }
          }
        }
      ],

（2)地图绑定的点击事件
主要通过高德SDK内置的方法获取到坐标点和地址

 markerEvents: {
    click(e) {
      self.markers = [];
      console.log([e.lnglat.lng, e.lnglat.lat])//可以拿到点击的坐标
      let marker = {
        position: [e.lnglat.lng, e.lnglat.lat]
      };
      self.markers.push(marker);
      //     这里通过高德 SDK 完成。通过高德SDK内置的方法获取到坐标点和地址
      var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
      });
      geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(
        status,
        result
      ) {
        if (status === "complete" && result.info === "OK") {
          if (result && result.regeocode) {
              //这里我给弹框赋值点击的坐标和地址
            self.window.position = [e.lnglat.lng, e.lnglat.lat];
            self.window.content = result.regeocode.formattedAddress
            self.$nextTick();
          }
        }
      });
    }
  },

（3)在地图上点击添加点位

let marker = {
position: [e.lnglat.lng, e.lnglat.lat]
};
self.markers.push(marker);

以上代码中点击时往markers里添加了点坐标那么我们只需要循环拿出来即可

<el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :key="index">
</el-amap-marker>

（4)下面是搜索显示点位的功能：
searchOption搜索条件
onSearchResult搜索回调函数

<el-amap-search-box class="search-box" 
:search-option="searchOption" 
:on-search-result="onSearchResult">
</el-amap-search-box>
属性：
     searchOption: {
        city: "海淀区",//限制城市
        citylimit: true//是否限制城市内搜索
      },
方法：
    onSearchResult(pois) {
      console.log(this.searchOption.ctiy);
      this.markers.length = [];
      this.zoom = 17;
      this.center = [pois[0].lng, pois[0].lat];
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          let name = poi;
          let marker = {
            position: [poi.lng, poi.lat],
            name: poi.name
          };
          this.markers.push(marker);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.mapCenter = [center.lng, center.lat];
      }
    }