vue项目引入高德地图出现的错误
在首页引入高德地图组件后,跳转其他页面再回到首页时。控制台出现了奇奇怪怪的错误:Uncaught Error: Invalid Object: Pixel(NaN, NaN)
而且这个错误非常任性,时而出现,时而不出现。
我尝试了好几种方式,最后终于解决了但是依然不知道原因是啥。
第一:由于我最刚开始写的时候,是先调取接口接收数据,再初始化地图,把数据传给地图,这样一个同步的过程。这样做的一个非常大的缺点就是:打开页面之后一片空白,至少要5秒钟才出现内容,非常的客户不友好。于是在领导的建议下,让我改成异步过程,先初始化地图,再的调用接口传数据。这样加载首页的时候感觉好多了。
代码如下:
getData() {
var datas=[];
getListTerminalMap().then(v => {
datas.push(v.data);
// console.log(data1);
// this.mapInit(data1)
var maxLongitude = 0, maxLatitude = 0;
var minLongitude = 500, minLatitude = 50;
for (var i = 0; i < datas[0].length; i++) {
if (datas[0][i].longitude > maxLongitude) {
maxLongitude = datas[0][i].longitude;
}
if (datas[0][i].longitude < minLongitude) {
minLongitude = datas[0][i].longitude;
}
if (datas[0][i].latitude > maxLatitude) {
maxLatitude = datas[0][i].latitude;
}
if (datas[0][i].latitude < minLatitude) {
minLatitude = datas[0][i].latitude;
}
}
var southWest = [minLongitude - 0.011, maxLatitude - 0.006]//找到最右下的坐标
var northEast = [maxLongitude + 0.011, minLatitude + 0.006]//找到最左上的坐标
var mapLocation = [];//记录箱体的经纬度
var mapContent1 = [];//记录箱体的终端号
var mapContent2 = [];//记录箱体的状态
for (var i = 0; i < datas[0].length; i++) {
// if(datas[0][i].longitude==null||datas[0][i].longitude==''){
//
// }
mapLocation[i] = [datas[0][i].longitude, datas[0][i].latitude];
mapContent1[i] = datas[0][i].terminalno;
mapContent2[i] = 'marker' + datas[0][i].type//给marker标记图形 0代表正常 1代表异常
this.searchMarker = this.newMaker(
mapContent2[i], mapLocation[i], mapContent1[i], this.onMarkerClick
);
this.map.add([this.searchMarker])
};
// console.log(southWest, northEast)
if((southWest ==''||southWest==undefined)&&(northEast ==''||northEast==undefined)){
southWest='119.475453, 31.420174';
northEast='119.475453, 31.420174';
this.setToBounds(southWest, northEast)
}
else {
this.setToBounds(southWest, northEast)
}
})
},
mapInit() {
// console.log(datas)
// console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
AMapLoader.load({
key: "YOUT-KEY", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [] //插件列表
}).then((AMap) => {
this.mapModule = AMap;
this.map = new AMap.Map('myMap', {
zoom: 8,//级别
center: [119.475453, 31.420174],//中心点坐标
viewMode: '3D',//使用3D视图
mapStyle: "amap://styles/darkblue",
rotateEnable: true,
pitchEnable: true,
resizeEnable: true, //是否监控地图容器尺寸变化
});
this.getData();
}).catch(e => {
});
},
setToBounds(southWest, northEast) {
// console.log(southWest)
// console.log(northEast)
let bounds = new AMap.Bounds(southWest, northEast);
this.map.setBounds(bounds);
},
// newBounds(southWest, northEast) {
// let bounds = new this.mapModule.Bounds(southWest, northEast);
// return bounds;
// },
newMaker(marker_tag, position, extData, onclick) {
// console.log(marker_tag, position, onclick)
let marker = new this.mapModule.Marker({
position: position,
extData: extData
});
// 点标记中的文本
let markerContent = document.createElement("div");
markerContent.className = "marker-content";
//
let markerSpan = document.createElement("span");
markerSpan.className = "marker";
// markerSpan.innerHTML = title;
markerContent.appendChild(markerSpan);
// 点标记中的图标
let markerImg = document.createElement("img");
markerImg.src = require("@/assets/image/" + marker_tag + ".png");
markerImg.setAttribute("width", "25px");
markerImg.setAttribute("height", "34px");
markerContent.appendChild(markerImg);
marker.setContent(markerContent); //更新点标记内容
marker.on("click", onclick); //绑定click事件
return marker;
},
onMarkerClick(e) {
let target = e.target;
let options = target.getExtData()
// console.log(options)
this.open = true;
getListOfStatus(options).then(value => {
// console.log(value)
this.terminal_serial = "终端编号为" + options + "全部箱体信息";
this.tableData = value.data;
this.loading = false;
})
},
// 积分记录取消开窗
cancel() {
this.open = false;
this.form = {};
},
}
第二:老大推测地图容器在跳转到别的页面之后没有被销毁,于是加了销毁地图的代码:
destroyed() {
this.map.destroy();
this.map = null;
// this.mapModule.dispose();
this.mapModule = null;
// console.log("==================destroyed==================");
},