項目上搞了個百度地圖定位讹挎,給大家詳細說說免得踩坑玫镐;
new?BMapGL跟new?BMap 類似,前者多了個3D煤伟;
這里重點講兩點,也是很重要的兩點:
1.一定要在頁面關閉或路由跳轉(zhuǎn)的時候清除地圖,this.Map.destroy();便锨,建議地圖初始化后把地圖存在全局围辙,有利于后面在地圖上操作;
2.一定要在lazyBMapApiLoaderInstance.load()后初始化地圖保證地圖可以渲染出來放案,不然會有問題
好了上代碼;
首先這個地圖比較消耗渲染時間姚建,所以我們在進入頁面時優(yōu)先先把基本地圖樣式先渲染出來
import?{?lazyBMapApiLoaderInstance?}?from?"vue-bmap-gl";
在mounted里執(zhí)行下面方法,渲染地圖,防止出現(xiàn)未知的錯誤
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;
??????//?//?禁止地圖旋轉(zhuǎn)和傾斜
??????var?map?=?new?BMapGL.Map("container",?{
????????enableRotate:?false,
????????enableTilt:?false
??????});?//?創(chuàng)建地圖實例
??????map.centerAndZoom(
????????new?BMapGL.Point(_this.BMapGLPoint.lng,?_this.BMapGLPoint.lat),
????????12
??????);?//?初始化地圖,設置中心點坐標和地圖級別
??????this.Map?=?map;
??????map.setHeading(0);?//設置地圖旋轉(zhuǎn)角度
??????map.setTilt(40);
??????//?map.NavigationControl3DOptions(40);?//設置地圖的傾斜角度
??????map.setDefaultCursor("crosshair");?//設置地圖默認的鼠標指針樣式
??????map.disableDoubleClickZoom();?//禁用雙擊放大
??????map.disableDragging();?//禁用地圖拖拽
??????map.setDefaultCursor("default");
?????map.setTilt(40);?//地圖偏移后友雳,視角偏移40度
}稿湿;