一个项目里兼容不同版本的高德地图

仰望半月

已于 2023-06-25 14:35:18 修改

阅读量669

点赞数

分类专栏：高德地图文章标签： vue.js

于 2023-06-25 14:29:03 首次发布

本文链接：https://blog.csdn.net/qq_40295331/article/details/131376677

版权

高德地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章描述了一种在不改动原有使用高德地图v1.4.15版本的基础上，通过异步加载不同版本地图来实现新需求——电子围栏的方法。主要通过删除旧版本脚本，加载新版本脚本，并利用Promise处理加载状态，确保正确初始化地图。

摘要由CSDN通过智能技术生成

-------------------------背景----------------

是这样的，原本项目中用的高德地图v1.4.15版本的，这次我们增加了新需求，要做电子围栏，我发现只有2.0的版本才有吸附功能，那怎么办？

也不想动之前v1.4.15已经完结的东西，那还是的想办法的用v2.0的啦！

于是就想着，进不同的页面，就加载对应想要版本的高德地图。。。

于是大概思路：一进入该页面，先判断并删掉之前引入的版本地图，再加载想要版本的地图，ok~~~开始吧！

-------------------------进入正题------------

这里我写了一个引入高德地图两个版本的js文件

AMap.js

import mapKey from '@/assets/js/mapKey.js'
const ak = mapKey.gaodeKey // 高德的地图密钥

/**
 * 异步加载高德地图 1.4.15版本
 * @returns {Promise}
 * @constructor
 */
function MapLoader1() {   
  return new Promise((resolve, reject) => {
    if (document.getElementById('amap_plus_js')) {
      document.head.removeChild(document.getElementById('amap_plus_js'));
    }
    if (document.getElementById('gaodeMapIdScript')) {
      document.head.removeChild(document.getElementById('gaodeMapIdScript'));
      createScript();
    } else {
      createScript();
    }
    function createScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.id = "gaodeMapIdScript"
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=' + ak + '&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.Driving,AMap.MoveAnimation,AMap.GraspRoad,AMap.MarkerClusterer'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}
export { MapLoader1 }



/**
 * 异步加载高德地图 2.0版本
 * @returns {Promise}
 * @constructor
 */
function MapLoader2() {   
  return new Promise((resolve, reject) => {
    if (document.getElementById('amap_plus_js')) {
      document.head.removeChild(document.getElementById('amap_plus_js'));
    }
    if (document.getElementById('gaodeMapIdScript')) {
      document.head.removeChild(document.getElementById('gaodeMapIdScript'));
      createScript();
    } else {
      createScript();
    }
    function createScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.id = "gaodeMapIdScript"
      script.src = 'https://webapi.amap.com/maps?v=2.0&callback=initAMap&key=' + ak + '&plugin=AMap.Scale,AMap.PolygonEditor'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}
export { MapLoader2 }

好的，接下来开始引入并应用

// 1、页面引入对应版本的高德地图

import {MapLoader2} from '@/utils/gaodeMap/AMap'

// 2、

created() {

  this.loadBMapScript();

},
methods: {
  //加载在线文件
  loadBMapScript() {
     MapLoader2().then(AMap => {
       console.log('地图加载成功')
       this.initMap(); //初始化地图
     }, e => {
       console.log('地图加载失败' ,e)
     })
   },
}

ok啦~~~ 大功告成！

这样就兼容之前的版本啦！又解决一个问题，不容易

如果有用的话，那就点个赞点个赞点个赞吧！哈哈哈~~~