vue 中两个页面里分别使用一张百度地图，只要有一个页面加载了地图另外一个页面地图显示空白，该如何解决？

  • Z时代
  • 2024-03-08
  • 分类：IT

现在有两个页面两个页面都有一张地图分别是 页面A 页面B。

页面A是加载页面直接显示地图。是通过vue中的mounted方法初始化地图。
页面B是打开element的el-dialog弹窗后才创建地图。

今天测试的时候发现一个问题这两个地图是不能相互存在，只要有一个页面的地图加载了另外一个页面的地图就加载不出来为空白的状态，但是 控制台不报 错地图上面自己创建的标注是可以显示，查了很久不知道什么问题。如下
vue 中两个页面里分别使用一张百度地图，只要有一个页面加载了地图另外一个页面地图显示空白，该如何解决？
vue 中两个页面里分别使用一张百度地图，只要有一个页面加载了地图另外一个页面地图显示空白，该如何解决？

上代码

百度地图通过外部连接引入

export function MP() {
  let ak = ""
  return new Promise(function (resolve, reject) {
    window.init = function () {
      resolve(BMapGL)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://api.map.baidu.com/api?type=webgl&v=2.0&ak=" + ak + "&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

页面A代码

MP().then((BMapGL) => {
          /* eslint-disable */
          let map = new BMapGL.Map('map',{
            restrictCenter: false,
          })    // 创建Map实例
          var point = new BMapGL.Point(113.399025,22.523416);
          map.setDisplayOptions( {
            indoor: false,
            poi: true
          });
          map.setTilt(60);
          map.setHeading(0);
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放
          var view = new window.mapvgl.View({
            map: map
          });
          let data = this.getData();//请求后端数据
          data.then(res =>{
            var carlineLayer = new mapvgl.CarLineLayer({
              url: 'http://r3je00muj.hn-bkt.clouddn.com/car.gltf',
              autoPlay: true,
              step: 0.2,
              scale: 100,
            });
            view.addLayer(carlineLayer);
            carlineLayer.setData(res);
          })
          map.setDefaultCursor('default');
        })

页面B代码

 this.$nextTick(function () {
        var _this = this
        MP().then((BMapGL) => {
          /* eslint-disable */
          let carMap = new BMapGL.Map('carMap',{
            restrictCenter: false,
          })    // 创建Map实例
          let dataPoint = data[0].geometry.coordinates[0];
          console.log(dataPoint);
          var point = new BMapGL.Point(dataPoint[0].toFixed(6),dataPoint[1].toFixed(6));
          carMap.setDisplayOptions( {
            indoor: false,
            poi: true
          });
          carMap.setTilt(60);
          carMap.setHeading(0);
          carMap.centerAndZoom(point, 15);
          carMap.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放
          var view = new window.mapvgl.View({
            map: carMap
          });
          view.startAnimation();
          var lineLayer = new mapvgl.LineLayer({
            width: 10,
            color: 'rgba(55, 71, 226, 0.9)',
            style: 'road',
            enablePicked: true,
            onClick: e => {
              console.log(e);
            }
          });
          view.addLayer(lineLayer);
          lineLayer.setData(data);
          map.setDefaultCursor('default');
        })
      })

回答：

这样试一下呢？
export function MP() {
let ak = ""
return new Promise(function (resolve, reject) {

if(window.BMapGL){
  resolve(BMapGL)
  return
}
var script = document.createElement("script");
script.type = "text/javascript";
script.onload = function () {
  resolve(window.BMapGL)
}
script.src = "https://api.map.baidu.com/api?type=webgl&v=2.0&ak=" + ak + "&callback=init";
script.onerror = reject;
document.head.appendChild(script);

})
}

以上是 vue 中两个页面里分别使用一张百度地图，只要有一个页面加载了地图另外一个页面地图显示空白，该如何解决？ 的全部内容， 来源链接： utcz.com/p/936763.html

回到顶部