地图选址功能完善1

昨天实现的地址选址功能发现一个bug，

有时候会报以上错误，有时候又是正常的，感觉好像是加载顺序的问题，然后查了好半天文档，发现在main.js中，

Vue.use(VueAMap)

在以上一行代码之前加入一个

localStorage.clear();

就好了，目前没有出现什么错误，如果后续发现bug再来完善。

来来来，上代码：

main.js文件

import Vue from 'vue'
import VueAMap from 'vue-amap'
import App from './App'
import router from './router'
Vue.config.productionTip = false
localStorage.clear();
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  //高德的key
  key: "cc644a48b701c256e9a827f068743fdd",
  // 插件集合
  plugin: [
    "AMap.Autocomplete",// 输入提示插件 
    "AMap.PlaceSearch",// POI搜索插件
    "AMap.Scale",// 右下角缩略图插件 比例尺
    "AMap.OverView",// 地图鹰眼插件
    "AMap.ToolBar",// 地图工具条
    "AMap.MapType",// 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor",// 编辑 折线多，边形
    "AMap.CircleEditor",// 圆形编辑器插件
    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.Geocoder",// 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
    "AMap.AMapUI",// UI组件
  ],
  v: "1.4.4",
  uiVersion: "1.0.11" // 版本号
});

/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

地图选点调用vue 文件

<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;
  h3 {
    padding-left: 50px;
  }
  
  // 地图选点-Style
  .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'>
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,
      mapCenter:null,
    };
  },
  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>