高德地图引入Vue添加POI搜索功能、marker点标记、通过经纬度逆编码过程

原创

于 2022-08-27 22:09:41 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

安装高德地图

npm i @amap/amap-jsapi-loader --save

引入

import AMapLoader from '@amap/amap-jsapi-loader';

*在组件中引入设置安全密匙

  beforeMount() {
   
   
    window._AMapSecurityCosnfig = {
   
   
      securityJsCode: "XXXXXXXXXXX"
    }
  },

初始化

initMap(){
   
   
      AMapLoader.load({
   
   
        key:"XXXXXXXXXX",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[
          'AMap.Scale',
          'AMap.ToolBar',
          'AMap.ControlBar',
          'AMap.Geocoder',
          'HawkEye'
        ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
   
                // 是否加载 AMapUI，缺省不加载
          version: '1.1',   // AMapUI 版本
          plugins:[
            'overlay/SimpleMarker',
          ],       // 需要加载的 AMapUI ui插件
        },
        Loca:{
   
                   // 是否加载 Loca， 缺省不加载
          version: '2.0'  // Loca 版本
        },
      }).then((AMap)=>{
   
   

        // vue2 中采用非响应式储存
        this.map = new AMap.Map("MapSetCom"