vue集成高德地图避免踩坑

vue集成高德地图##

vue集成高德地图，主要解决几个问题，集成问题、地图重复刷新加载失效问题、官方api获取不到街道编码问题

申请key

涉及到web端集成高德地图，主要有两种key,这里容易造成歧义：
[高德开发者平台]
1、Web服务 自主发送请求

web服务api---------发给那些不喜欢找文档的小伙伴
2、Web端（JS API）

用户vue集成高德地图我们一般都是采用的这个服务 但是JS API没有透出所有的字段，如果你需要的字段JSAPI恰好没有透出，那就要使用WEB服务了 切记这两个key 不要混用，我已经踩了大坑。。。。。
JSAPI文档---------发给那些不喜欢找文档的小伙伴

项目集成

1、项目依赖

npm install vue-amap -S

2、在main.js中添加以下代码

import Amap from 'vue-amap'

Vue.prototype.$ajax = axios
Vue.use(Amap)
    // 初始化vue-amap
Amap.initAMapApiLoader({
    // 高德key
    key: 你的key,
    // 插件集合 （插件按需引入）
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})

3、异步创建script标签，解决地图重复刷新加载失效问题

/*
 * 异步创建script标签
 */
export default function MapLoader() {
    return new Promise((resolve, reject) => {
        if (window.AMap) {
            resolve(window.AMap)
        } else {
            var url = 'https://webapi.amap.com/maps?v=1.4.15&key=' + 你的key + '&callback=onLoad'
            var script = document.createElement('script')
            script.charset = 'utf-8'
            script.src = url
            script.onerror = reject
            document.head.appendChild(script)
        }
        window.onLoad = () => {
            resolve(window.AMap)
        }
    })
}

4、创建地图组件 /components/Amap/index.vue

<template>
  <div id="amap-container">
    <el-input
      id="search-input"
      v-model="searchValue"
      class="input-with"
      placeholder="请输入地址"
      clearable
      @clear="handelclearInput"
      @keyup.native.enter="handelSearch"
    >
      <el-button
        slot="append"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="handelSearch"
        >搜索</el-button
      >
    </el-input>

    <div id="searchResultPanel" />
    <el-row class="margin-top-10 address">
      当前地址是： {{ formattedAddress }}
      <el-button size="small" type="primary" @click="handelSave"
        >使用该地址</el-button
      >
    </el-row>

    <div id="custom-amap" />
  </div>
</template>

<script>
  import MapLoader from '@/utils/amap'
  const AMap = window.AMap;
  export default {
    name: 'AMap',
    props: {
      defaultValue: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        defaultCity: '北京',
        // 地图对象
        map: null,
        // 定位默认地址 | 搜索后选择的地址
        formattedAddress: null,
        // 地址对应的经纬度信息
        position: {},
        // 检索关键字
        searchValue: '',
        // 检索函数对象
        placeSearch: null,
        // 检索结果数据数据
        searchInfoList: [],
        // 地图标记
        marker: '',
        // 地址解析（正向）
        geocoder: '',
        // 地址名称
        name: ''
      };
    },
    watch: {
      defaultValue() {
        this.searchValue = this.defaultValue;
      }
    },
    mounted() {
      // 初始化地图页面
      this.initMap();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('custom-amap', {
          resizeEnable: true,
          zoom: 50
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 显示鹰眼
          const overView = new AMap.OverView();
          this.map.addControl(toolbar);
          this.map.addControl(scale);
          this.map.addControl(overView);
        });
        // 添加maker
        this.setMaker();
        // 添加鼠标点选地图选择地址
        this.addAmapGeocoder();
        // 添加定位
        this.addAMapGeolocation();
        // 添加检索提示
        this.addAMapAutocompletePlaceSearch();
      },
      // 添加maker
      setMaker() {
        this.marker = new AMap.Marker();
        this.map.add(this.marker);
        // 添加解析地理位置插件
        this.map.plugin('AMap.Geocoder', () => {
          // 异步加载插件
          this.geocoder = new AMap.Geocoder({
            city: this.defaultCity, // 默认：“全国”
            radius: 1000 // 范围，默认：500
          });
        });
      },
      // 添加鼠标点选地图选择地址
      addAmapGeocoder() {
        // 添加maker
        this.setMaker();
        // 地图添加点击事件
        this.map.on('click', e => {
          const lnglat = [e.lnglat.lng, e.lnglat.lat];
          this.marker.setPosition(lnglat);
          this.geocoder.getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              const res = result.regeocode;
              const data = {
                // 地址名称
                adress: res.formattedAddress,
                // 纬度lat
                lat: lnglat[1],
                // 经度lng
                lng: lnglat[0]
              };
              this.formattedAddress = res.formattedAddress;
              this.position = data;
            } else {
              alert(JSON.stringify(result));
            }
          });
        });
      },
      // 添加自动定位
      addAMapGeolocation() {
        this.map.plugin('AMap.Geolocation', () => {
          const geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(200, 200),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: 'RB'
          });
          // 获取当前位置
          geolocation.getCurrentPosition();
          // 添加定位当前城市成功监听
          AMap.event.addListener(
            geolocation,
            'complete',
            this.onCurrentPositionComplete
          );
          // 添加定位当前城市发生错误监听
          AMap.event.addListener(
            geolocation,
            'error',
            this.onCurrentPositionError
          );
        });
      },
      // 添加检索提示检索
      addAMapAutocompletePlaceSearch() {
        // 自动提示
        this.map.plugin('AMap.Autocomplete', () => {
          const auto = new AMap.Autocomplete({
            city: this.defaultCity,
            input: 'search-input'
          });
          // 添加检索监听
          AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);
        });
        // 检索服务
        AMap.service(['AMap.PlaceSearch'], () => {
          // 构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            type: '', // 兴趣点类别
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: this.defaultCity, // 兴趣点城市
            citylimit: false, // 是否强制限制在设置的城市内搜索
            map: this.map, // 展现结果的地图实例
            panel: 'searchResultPanel', // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
        });
        // 添加检索监听
        AMap.event.addListener(
          this.placeSearch,
          'listElementClick',
          this.onSelectSearch
        );
      },
      // 定位当前城市成功回调
      onCurrentPositionComplete(res) {
        // 添加maker
        this.setMaker();
        const lnglat = [res.position.lng, res.position.lat];
        this.marker.setPosition(lnglat);
        console.log(res, 'res');
        this.formattedAddress = res.formattedAddress;
        this.position = res.position;
      },
      // 定位当前城市发生错误回调
      onCurrentPositionError(err) {
        console.log(err);
      },
      // 按钮触发检索
      handelSearch() {
        this.placeSearch.search(this.searchValue, (status, info) => {
          this.searchInfoList = info.poiList.pois;
        });
      },
      // 选择自动提示数据事件回调
      onSelectAutocomplete(e) {
        this.searchValue = e.poi.name;
        this.handelSearch();
      },
      // 选择检索数据结果事件回调
      onSelectSearch(e) {
        const res = e.data;
        this.formattedAddress = res.cityname + res.adname + res.address;
        this.name = res.name;
        this.position = res.location;
      },
      // 清除input里的值，清除搜索结果，再次初始化map
      handelclearInput() {
        document.querySelector('#searchResultPanel').innerHTML = '';
      },
      // 保存当前选择的地址,分发事件
      handelSave() {
        this.searchValue = this.formattedAddress;
        const { lat, lng } = this.position;
        const data = {
          name: this.name,
          // 地址名称
          address: this.formattedAddress,
          // 纬度lat
          lat,
          // 经度lng
          lng
        };
        this.$emit('getPosition', data);
      }
    },
    mounted (){
      // 初始化地图对象，加载地图
     MapLoader().then(aMap => {
       console.log('%地图异步加载成功%')
       AMap = aMap
       setTimeout(() => {
         this.initMap()
       }, 500)
     })
   }
  };
</script>

<style lang="scss">
  #amap-container {
    .el-input__clear {
      line-height: 34px;
      // top: 20px;
    }
    #custom-amap {
      height: 60vh;
      width: 100%;
      margin-top: 10px;
      border: 1px solid #ccc;
    }
    .input-with {
      // position: fixed;
      // top: 40px;
      z-index: 1;
      width: 580px;
    }
    .address {
      color: #373737;
    }
  }
  .amap-sug-result {
    z-index: 99999;
  }
</style>

5、页面调用

<template>
  <amap :default-value="postForm.detailedAddress" @getPosition="getPosition" />
</template>
<script>
import Amap from '@/components/Amap'
export default {
    components: {
      Amap
    },
    data: {
      postForm: {
        detailedAddress: '',
        longitude: '',
        latitude: ''
      }
    },
    methods: {
      // 获取地址信息
      getPosition({ address, lat, lng, name }) {
        this.postForm.detailedAddress = address;
        this.postForm.longitude = String(lng);
        this.postForm.latitude = String(lat);
      }
    }
};
</script>

小结

这次百度集成，不知道是不是太菜的原因还是什么，总之不是很顺利遇到了好多坑，因为我们的高德地图账号没有买专业版，所以工单系统就没指望上，把遇到的问题发在这里，给自己记录一下，也顺便给小伙伴们分享一下

借鉴

参考链接
在其中完善了 地图加载不显示的问题。