Vue.js
如何解决腾讯位置服务出现WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost？
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
vue中使用腾讯位置服务api根据不同的经纬度定位，有时候，会出现WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost的警告，然后屏幕一黑，再看时控制台已经报错了，这个该如何解决
代码片段
<template>
<div>
<div id="container" :style="{'height':height+'px'}"></div>
</div>
</template>
<script>
export default {
name: "MapArea",
props: {
height: Number,
lat: Number,
lng: Number
},
data() {
return {
markerLayer: null,
map:null
};
},
mounted() {
var lat = this.lat;
var lng = this.lng;
var map = new TMap.Map("container", {
center: new TMap.LatLng(lat, lng)
});
this.markerLayer = new TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
myStyle: new TMap.MarkerStyle({
width: 25, // 点标记样式宽度（像素）
height: 35, // 点标记样式高度（像素）
src: "https://ncovwechatapi.zhixinst.com/jxnydx/position.png", //图片路径
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
anchor: { x: 16, y: 32 }
})
},
//点标记数据数组
// geometries: [
// {
// id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// styleId: "marker", //指定样式id
// position: new TMap.LatLng(lat, lng), //点标记坐标位置
// properties: {
// //自定义属性
// title: "打卡位置"
// }
// }
// ]
})
this.init();
},
methods: {
init() {
var lat = this.lat;
var lng = this.lng;
this.markerLayer.setGeometries([{
id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
styleId: "marker", //指定样式id
position: new TMap.LatLng(lat, lng), //点标记坐标位置
properties: {
//自定义属性
title: "打卡位置"
}
}]);
},
}
};
</script>