项目上搞了个百度地图定位,给大家详细说说免得踩坑;
new BMapGL跟new BMap 类似,前者多了个3D;
这里重点讲两点,也是很重要的两点:
1.一定要在页面关闭或路由跳转的时候清除地图,this.Map.destroy();,建议地图初始化后把地图存在全局,有利于后面在地图上操作;
2.一定要在lazyBMapApiLoaderInstance.load()后初始化地图保证地图可以渲染出来,不然会有问题
好了上代码;
首先这个地图比较消耗渲染时间,所以我们在进入页面时优先先把基本地图样式先渲染出来
import { lazyBMapApiLoaderInstance } from "vue-bmap-gl";
在mounted里执行下面方法,渲染地图,防止出现未知的错误
lazyBMapApiLoaderInstance.load().then(() => {
this.Map_init();
});
初始化完成之后,在操作地图时直接操作 this.Map就可以了;
// api链接 https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b0
function Map_init(){
let _this = this;
// // 禁止地图旋转和倾斜
var map = new BMapGL.Map("container", {
enableRotate: false,
enableTilt: false
}); // 创建地图实例
map.centerAndZoom(
new BMapGL.Point(_this.BMapGLPoint.lng, _this.BMapGLPoint.lat),
12
); // 初始化地图,设置中心点坐标和地图级别
this.Map = map;
map.setHeading(0); //设置地图旋转角度
map.setTilt(40);
// map.NavigationControl3DOptions(40); //设置地图的倾斜角度
map.setDefaultCursor("crosshair"); //设置地图默认的鼠标指针样式
map.disableDoubleClickZoom(); //禁用双击放大
map.disableDragging(); //禁用地图拖拽
map.setDefaultCursor("default");
map.setTilt(40); //地图偏移后,视角偏移40度
};