高德地图多版本兼容问题

2 年前 · 来自专栏前端姿势小记

拾壹

仰望山顶，let me to the top

背景：

vue项目开发过程中需要使用高德的矢量图编辑功能，大概的功能是描绘出一段路线的轨迹，使用高德的AMap.PolylineEditor工具过程中发现当轨迹点的数量到百级时就会出现页面卡顿，当数目更大还会造成页面崩溃的情况。

经与高德技术人员沟通得知，高德低版本已经不满足需求了，建议升级高德2.0版本

但我的项目是基于vue-amap开发的，vue-amap基于高德1.0的版本，已经两年没有维护了，无法对应高德2.0的新功能。

思路1：

在main.js中引入1.4.15版本，在页面中引入2.0版本，项目初次加载时会加载1.4.15版本，当进入页面时会加载2.0版本，可以使用2.0的新功能，但是当返回其他页面时高德2.0会覆盖低版本，造成其他使用低版本的功能不好用。

// main.js中引入高德地图
VueAMap.initAMapApiLoader({
  key: "82732c148a5e35877e3a5b3face28c25",
  plugin: [
    "AMap.MouseTool",
    "Scale",
    "AMap.ToolBar",
    "Geolocation",
    "MarkerClusterer",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
    "AMap.CitySearch",
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.DistrictSearch",
    "Geocoder",
    "AMap.MassMarks",
  v: "1.4.15",
});

暂时没有找到当返回其他页时清除高德2.0的地图缓存方法，此方法不可行

思路2：

引入iframe标签，在html中引入高德2.0版本，在切换路由的时候再清除地图的缓存，从而达到多版本兼容。

注意：在返回其他页时也会有缓存问题，但是可以解决，在引入iframe标签中的destoryed生命周期中写如下方法

beforeDestroy() {
    var iframe = document.getElementById("iframe");
    iframe.src = "about:blank";
    try {
      iframe.contentWindow.document.write("");
      iframe.contentWindow.document.clear();
    } catch (e) {}
    //把iframe从页面移除
    iframe.parentNode.removeChild(iframe);
  },

不设置为about:blank，内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空。

其次就是iframe页面的加载完成以及和vue页面的传递参数问题

判断加载完成：

let iframe = document.getElementById("iframe");
iframe.contentDocument.body.onload = function () {
//处理代码
};

vue页面向iframe页面传递参数：

首先保证iframe已经渲染完成，其次用postMessage传递参数

vue页面：

let iframe = document.getElementById("iframe");
    iframe.contentDocument.body.onload = function () {
      console.log("加载完成");
      let json = {
        geom: _this.shape.geom,
      iframe.contentWindow.postMessage(json, "*");
    };

iframe页面：

window.addEventListener(
        "message",
        function(e) {
          console.log("e.data.test", e.data.geom);
        false
      );

iframe页面向vue页面传递参数：

vue页面：

mounted() {
    let _this = this;
    window.endEditor = _this.endEditor;
    window.closeMap = _this.closeMap;
methods() {
    endEditor(path) {
      console.log(path);