vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具
更新時(shí)間：2023年02月03日 11:20:34 作者：你怎么在吐泡泡
這篇文章主要為大家介紹了vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
記錄一下vue項(xiàng)目使用百度地圖所用的api和踩過(guò)的坑，減少以后引用少走彎路。旨在記錄，第一次開(kāi)貼，不足之處請(qǐng)多多指教。廢話不多說(shuō)，開(kāi)擼！
1、引用百度地圖
這里賬號(hào)密鑰不多說(shuō)，上鏈接，自己注冊(cè)。
首先要在你項(xiàng)目的index.html里面加上以下代碼： 這個(gè)是BMap
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
這個(gè)是BMapGL
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
如果需要使用輔助工具BMapGLLib ，還得把以下兩個(gè)也放入
<link rel="external nofollow" rel="stylesheet"> <script type="text/javascript" src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
2、在項(xiàng)目中使用百度地圖
2-1、頁(yè)面結(jié)構(gòu)部分
（1）創(chuàng)建地圖容器元素
<div class="map-body" :id="mapId"></div>
（2）設(shè)置容器樣式大小
.map-body {
position: relative;
height: 500px;
border: 1px solid #dcdfe6;
}
2-2、js邏輯部分
（1）創(chuàng)建地圖實(shí)例
createMap(lgt, lat) {
// this.maploading=true;
this.map = new BMapGL.Map(this.mapId, { enableMapClick: false }) // 創(chuàng)建Map實(shí)例,GL版命名空間為BMapGL(鼠標(biāo)右鍵控制傾斜角度)
this.map.centerAndZoom(new BMapGL.Point(lgt, lat), 11) // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
this.map.enableScrollWheelZoom(true)// 開(kāi)啟鼠標(biāo)滾輪縮放
},
（2）把地圖賦值給全局變量，方便后續(xù)使用
data() {
return {
map: "",
mapId: "", //我這里采用了動(dòng)態(tài)id這個(gè)不是必須的，看自己需求來(lái)
}
created() {
this.mapId = 'map' + new Date().getTime();
}
（3）設(shè)置中心點(diǎn)坐標(biāo) 這里我們使用BMapGL命名空間下的Point類來(lái)創(chuàng)建一個(gè)坐標(biāo)點(diǎn)。Point類描述了一個(gè)地理坐標(biāo)點(diǎn)，其中116.404表示經(jīng)度，39.915表示緯度。（為天安門(mén)坐標(biāo)）
const point = new BMapGL.Point(116.404, 39.915);
注意： 在使用百度地圖JavaScript API服務(wù)時(shí)，需使用百度BD09坐標(biāo)，如使用其他坐標(biāo)（ WGS84、GCJ02）進(jìn)行展示，需先將其他坐標(biāo)轉(zhuǎn)換為BD09，詳細(xì)說(shuō)明請(qǐng)參考坐標(biāo)轉(zhuǎn)換說(shuō)明，請(qǐng)勿使用非官方的轉(zhuǎn)換方法。
（4）地圖初始化
created() {
this.mapId = 'map' + new Date().getTime();
const point = new BMapGL.Point(116.404, 39.915);
//創(chuàng)建地圖
this.$nextTick(() => {
this.createMap(point.lng, point.lat);
})
},
到現(xiàn)在為止，百度地圖就在你頁(yè)面上創(chuàng)建成功了。 附圖片：
3、在項(xiàng)目中使用百度地圖輔助工具BMapGLLib
現(xiàn)在的需求就是需要在頁(yè)面上標(biāo)注點(diǎn)，畫(huà)矩形，圓形的一些標(biāo)注線。百度地圖的輔助工具就剛好自帶了這兩個(gè)功能。
3-1、頁(yè)面結(jié)構(gòu)部分
（1）輔助工具欄html結(jié)構(gòu)和css樣式
<ul class="drawing-panel">
<li class="bmap-btn bmap-marker" @click="draw('marker')"
:style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px' }"></li>
<li class="bmap-btn bmap-polyline" @click="draw('polyline')"
:style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li>
<li class="bmap-btn bmap-rectangle" @click="draw('rectangle')"
:style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li>
<li class="bmap-btn bmap-polygon" @click="draw('polygon')"
:style="{ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px' }"></li>
<li class="bmap-btn bmap-circle" @click="draw('circle')"
:style="{ 'background-position-y': actNav === 'circle' ? '-52px' : '0px' }"></li>
</ul>
.drawing-panel {
z-index: 999;
position: absolute;
top: 14rem;
margin-left: 2.5rem;
padding-left: 0;
border-radius: .25rem;
height: 47px;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
border-right: 1px solid #d2d2d2;
float: left;
width: 64px;
height: 100%;
background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
cursor: pointer;
}
.drawing-panel .bmap-marker {
background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
background-position: -260px 0;
}
.drawing-panel .bmap-circle {
background-position: -130px 0;
}
結(jié)構(gòu)搭完效果如下：
3-2、js邏輯部分
上面地圖初始完后就能使用鼠標(biāo)繪制工具進(jìn)行需求的繪制
（1）實(shí)例化鼠標(biāo)繪制工具
draw(drawingType) {
console.log(drawingType, '666')
this.actNav = drawingType
/**這里看需求可以把它設(shè)置為全局變量。
*我這里需求需要，故設(shè)置了全局變量，以下代碼就注釋掉了*/
// const styleOptions = {
// strokeColor: '#5E87DB', // 邊線顏色
// fillColor: '#5E87DB', // 填充顏色。當(dāng)參數(shù)為空時(shí)，圓形沒(méi)有填充顏色
// strokeWeight: 2, // 邊線寬度，以像素為單位
// strokeOpacity: 1, // 邊線透明度，取值范圍0-1
// fillOpacity: 0.2 // 填充透明度，取值范圍0-1
// };
// const labelOptions = {
// borderRadius: '2px',
// background: '#FFFBCC',
// border: '1px solid #E1E1E1',
// color: '#703A04',
// fontSize: '12px',
// letterSpacing: '0',
// padding: '5px'
// };
// 實(shí)例化鼠標(biāo)繪制工具
const drawingManager = new BMapGLLib.DrawingManager(this.map, {
//isOpen: true, // 是否開(kāi)啟繪制模式
enableCalculate: false, // 繪制是否進(jìn)行測(cè)距測(cè)面
enableSorption: true, // 是否開(kāi)啟邊界吸附功能
sorptiondistance: 20, // 邊界吸附距離
circleOptions: this.styleOptions, // 圓的樣式
polylineOptions: this.styleOptions, // 線的樣式
polygonOptions: this.styleOptions, // 多邊形的樣式
rectangleOptions: this.styleOptions, // 矩形的樣式
labelOptions: this.labelOptions, // label樣式
})
// 進(jìn)行繪制
if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
drawingManager.close();
} else {
drawingManager.setDrawingMode(drawingType);
drawingManager.open();
}
/** 我這里需求是圓形和矩形還有點(diǎn)的標(biāo)注，
*還有兩種就沒(méi)有寫(xiě)它的監(jiān)聽(tīng)事件，也是差不多的，
*可以對(duì)照一下官方api和我寫(xiě)的就基本上差不多了，
*如果有誰(shuí)需要，我有時(shí)間也可以繼續(xù)把剩下兩種監(jiān)聽(tīng)事件補(bǔ)上 */
// 監(jiān)聽(tīng)事件
if (drawingType == 'rectangle') {
// 監(jiān)聽(tīng)矩形繪制完成事件
drawingManager.addEventListener("overlaycomplete", (e) => {
// 獲取矩形對(duì)象
const rectangle = e.overlay;
// 獲取矩形的四個(gè)頂點(diǎn)
const points = rectangle.getPath();
console.log(points, "頂點(diǎn)");
this.scope_point = points;
});
} else if (drawingType == 'circle') {
// 監(jiān)聽(tīng)圓形繪制完成事件
drawingManager.addEventListener("overlaycomplete", (e) => {
// 獲取圓形對(duì)象
const circle = e.overlay;
// 獲取圓形的圓心
const center = circle.getCenter();
console.log(center, "圓心");
// 獲取圓形的半徑
const radius = circle.getRadius();
console.log(radius, "半徑");
this.scope_point = center;
this.scope_radius = radius;
});
} else if (drawingType == 'marker') {
drawingManager.addEventListener("overlaycomplete", (e) => {
// 獲取標(biāo)注對(duì)象
const marker = e.overlay;
// 獲取標(biāo)注的經(jīng)緯度坐標(biāo)
this.point = marker.getPosition();
// 創(chuàng)建地理編碼服務(wù)實(shí)例
const geocoder = new BMapGL.Geocoder();
// 將經(jīng)緯度坐標(biāo)解析為地址信息
geocoder.getLocation(this.point, (result) => {
this.newForm.address = result.address;
console.log(this.point, result.address, "地址");
});
});
}
},
效果如圖所示（我只需要這三種，其他注釋掉了）：
4、在項(xiàng)目中使用BMap實(shí)例
注意： 大坑來(lái)啦?。?！ BMapGL 類創(chuàng)建的地圖實(shí)例不支持 addOverlay 方法,并且還不支持直接使用鼠標(biāo)繪制工具（BMapLib.DrawingManager 類）在地圖上繪制矩形框,故只能換成BMap)寫(xiě)完才知道，只能硬著頭皮往下寫(xiě)，因?yàn)槲倚枰故境鰟倓偖?huà)的那些標(biāo)注。。。
（1）重新初始化一個(gè)地圖實(shí)例（BMap）
this.map = new BMap.Map(this.mapId, { enableMapClick: false });
this.map.centerAndZoom(new BMap.Point(point_location[1], point_location[0]), 11) // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別我這里的point_location是后臺(tái)返回的坐標(biāo)，跟上面的類似
this.map.enableScrollWheelZoom(true)// 開(kāi)啟鼠標(biāo)滾輪縮放
（2）創(chuàng)建標(biāo)記點(diǎn)
// 創(chuàng)建標(biāo)記點(diǎn)的坐標(biāo) const point = new BMap.Point(point_location[1], point_location[0]);//point_location后臺(tái)返回字段 console.log(point, "坐標(biāo)") // 創(chuàng)建標(biāo)記點(diǎn)對(duì)象 const marker = new BMap.Marker(point); // 將標(biāo)記點(diǎn)添加到地圖上 this.map.addOverlay(marker);
（3）創(chuàng)建矩形框?qū)ο?/p>
// 創(chuàng)建矩形框?qū)ο? const rectangle = new BMap.Polygon([ new BMap.Point(this.rectangle[3], this.rectangle[2]), //rectangle后臺(tái)返回的坐標(biāo) new BMap.Point(this.rectangle[5], this.rectangle[4]), new BMap.Point(this.rectangle[7], this.rectangle[6]), new BMap.Point(this.rectangle[9], this.rectangle[8]), ], this.styleOptions); //styleOptions之前的全局變量 // 將矩形框添加到地圖上 this.map.addOverlay(rectangle); // 設(shè)置地圖視野，使得矩形框完全顯示在地圖視野內(nèi) this.map.setViewport(rectangle.getPath());
（4）創(chuàng)建圓形對(duì)象
// 創(chuàng)建圓心坐標(biāo) const center = new BMap.Point(this.rectangle[1], this.rectangle[0]);//rectangle后臺(tái)返回的圓形坐標(biāo) // 創(chuàng)建圓形標(biāo)注對(duì)象 const circle = new BMap.Circle(center, this.scope_radius, this.styleOptions); // 將圓形標(biāo)注添加到地圖上 this.map.addOverlay(circle);
以上就是vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的詳細(xì)內(nèi)容，更多關(guān)于vue引入百度地圖BMapGL的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- 解決Vue使用百度地圖BMapGL內(nèi)存泄漏問(wèn)題?Out?of?Memory
- vue中報(bào)錯(cuò)“error‘xxx‘?is?defined?but?never?used”問(wèn)題及解決
- Vue-cli3 $ is not defined錯(cuò)誤問(wèn)題及解決
- 解決Vue控制臺(tái)報(bào)錯(cuò)Failed to mount component: template or render function not defined.
- vue報(bào)錯(cuò)Cannot?read?properties?of?undefined?(...)類型的解決辦法
- vue在data中定義變量后依舊報(bào)undefined的解決
- 完美解決vue引入BMapGL is not defined的問(wèn)題
相關(guān)文章
Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列，文章基于Vue2?的相關(guān)資料展開(kāi)對(duì)主題的詳細(xì)介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-04-04
Ant?Design-vue?解決input前后空格問(wèn)題(推薦)
最近做項(xiàng)目遇到這樣一個(gè)問(wèn)題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個(gè)問(wèn)題呢，接下來(lái)小編把a(bǔ)nt?Design-vue?解決input前后空格問(wèn)題的實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2022-10-10
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
基于vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能
基于face-api.js要實(shí)現(xiàn)人臉識(shí)別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過(guò)cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能,感興趣的朋友一起看看吧2023-12-12
vue 動(dòng)態(tài)添加/刪除dom元素節(jié)點(diǎn)的操作代碼
這篇文章主要介紹了vue 動(dòng)態(tài)添加/刪除dom元素,需要在點(diǎn)擊添加時(shí)，增加一行key/value的輸入框；點(diǎn)擊垃圾桶圖標(biāo)時(shí)，刪除對(duì)應(yīng)行，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue Steps步驟條渲染異常問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決
這篇文章主要介紹了配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中在新窗口打開(kāi)頁(yè)面及Vue-router的使用
這篇文章主要介紹了Vue中在新窗口打開(kāi)頁(yè)面 及 Vue-router的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue詳細(xì)的入門(mén)筆記，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05