vue項目引入百度地圖BMapGL鼠標繪制和BMap輔助工具
更新時間：2023年02月03日 11:20:34 作者：你怎么在吐泡泡
這篇文章主要為大家介紹了vue項目引入百度地圖BMapGL鼠標繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
記錄一下vue項目使用百度地圖所用的api和踩過的坑，減少以后引用少走彎路。旨在記錄，第一次開貼，不足之處請多多指教。廢話不多說，開擼！
1、引用百度地圖
這里賬號密鑰不多說，上鏈接，自己注冊。
首先要在你項目的index.html里面加上以下代碼： 這個是BMap
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
這個是BMapGL
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
如果需要使用輔助工具BMapGLLib ，還得把以下兩個也放入
<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、在項目中使用百度地圖
2-1、頁面結構部分
（1）創(chuàng)建地圖容器元素
<div class="map-body" :id="mapId"></div>
（2）設置容器樣式大小
.map-body {
position: relative;
height: 500px;
border: 1px solid #dcdfe6;
}
2-2、js邏輯部分
（1）創(chuàng)建地圖實例
createMap(lgt, lat) {
// this.maploading=true;
this.map = new BMapGL.Map(this.mapId, { enableMapClick: false }) // 創(chuàng)建Map實例,GL版命名空間為BMapGL(鼠標右鍵控制傾斜角度)
this.map.centerAndZoom(new BMapGL.Point(lgt, lat), 11) // 初始化地圖,設置中心點坐標和地圖級別
this.map.enableScrollWheelZoom(true)// 開啟鼠標滾輪縮放
},
（2）把地圖賦值給全局變量，方便后續(xù)使用
data() {
return {
map: "",
mapId: "", //我這里采用了動態(tài)id這個不是必須的，看自己需求來
}
created() {
this.mapId = 'map' + new Date().getTime();
}
（3）設置中心點坐標 這里我們使用BMapGL命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。（為天安門坐標）
const point = new BMapGL.Point(116.404, 39.915);
注意： 在使用百度地圖JavaScript API服務時，需使用百度BD09坐標，如使用其他坐標（ WGS84、GCJ02）進行展示，需先將其他坐標轉換為BD09，詳細說明請參考坐標轉換說明，請勿使用非官方的轉換方法。
（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)在為止，百度地圖就在你頁面上創(chuàng)建成功了。 附圖片：
3、在項目中使用百度地圖輔助工具BMapGLLib
現(xiàn)在的需求就是需要在頁面上標注點，畫矩形，圓形的一些標注線。百度地圖的輔助工具就剛好自帶了這兩個功能。
3-1、頁面結構部分
（1）輔助工具欄html結構和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;
}
結構搭完效果如下：
3-2、js邏輯部分
上面地圖初始完后就能使用鼠標繪制工具進行需求的繪制
（1）實例化鼠標繪制工具
draw(drawingType) {
console.log(drawingType, '666')
this.actNav = drawingType
/**這里看需求可以把它設置為全局變量。
*我這里需求需要，故設置了全局變量，以下代碼就注釋掉了*/
// const styleOptions = {
// strokeColor: '#5E87DB', // 邊線顏色
// fillColor: '#5E87DB', // 填充顏色。當參數(shù)為空時，圓形沒有填充顏色
// 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'
// };
// 實例化鼠標繪制工具
const drawingManager = new BMapGLLib.DrawingManager(this.map, {
//isOpen: true, // 是否開啟繪制模式
enableCalculate: false, // 繪制是否進行測距測面
enableSorption: true, // 是否開啟邊界吸附功能
sorptiondistance: 20, // 邊界吸附距離
circleOptions: this.styleOptions, // 圓的樣式
polylineOptions: this.styleOptions, // 線的樣式
polygonOptions: this.styleOptions, // 多邊形的樣式
rectangleOptions: this.styleOptions, // 矩形的樣式
labelOptions: this.labelOptions, // label樣式
})
// 進行繪制
if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
drawingManager.close();
} else {
drawingManager.setDrawingMode(drawingType);
drawingManager.open();
}
/** 我這里需求是圓形和矩形還有點的標注，
*還有兩種就沒有寫它的監(jiān)聽事件，也是差不多的，
*可以對照一下官方api和我寫的就基本上差不多了，
*如果有誰需要，我有時間也可以繼續(xù)把剩下兩種監(jiān)聽事件補上 */
// 監(jiān)聽事件
if (drawingType == 'rectangle') {
// 監(jiān)聽矩形繪制完成事件
drawingManager.addEventListener("overlaycomplete", (e) => {
// 獲取矩形對象
const rectangle = e.overlay;
// 獲取矩形的四個頂點
const points = rectangle.getPath();
console.log(points, "頂點");
this.scope_point = points;
});
} else if (drawingType == 'circle') {
// 監(jiān)聽圓形繪制完成事件
drawingManager.addEventListener("overlaycomplete", (e) => {
// 獲取圓形對象
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) => {
// 獲取標注對象
const marker = e.overlay;
// 獲取標注的經緯度坐標
this.point = marker.getPosition();
// 創(chuàng)建地理編碼服務實例
const geocoder = new BMapGL.Geocoder();
// 將經緯度坐標解析為地址信息
geocoder.getLocation(this.point, (result) => {
this.newForm.address = result.address;
console.log(this.point, result.address, "地址");
});
});
}
},
效果如圖所示（我只需要這三種，其他注釋掉了）：
4、在項目中使用BMap實例
注意： 大坑來啦?。?！ BMapGL 類創(chuàng)建的地圖實例不支持 addOverlay 方法,并且還不支持直接使用鼠標繪制工具（BMapLib.DrawingManager 類）在地圖上繪制矩形框,故只能換成BMap)寫完才知道，只能硬著頭皮往下寫，因為我需要展示出剛剛畫的那些標注。。。
（1）重新初始化一個地圖實例（BMap）
this.map = new BMap.Map(this.mapId, { enableMapClick: false });
this.map.centerAndZoom(new BMap.Point(point_location[1], point_location[0]), 11) // 初始化地圖,設置中心點坐標和地圖級別我這里的point_location是后臺返回的坐標，跟上面的類似
this.map.enableScrollWheelZoom(true)// 開啟鼠標滾輪縮放
（2）創(chuàng)建標記點
// 創(chuàng)建標記點的坐標 const point = new BMap.Point(point_location[1], point_location[0]);//point_location后臺返回字段 console.log(point, "坐標") // 創(chuàng)建標記點對象 const marker = new BMap.Marker(point); // 將標記點添加到地圖上 this.map.addOverlay(marker);
（3）創(chuàng)建矩形框對象
// 創(chuàng)建矩形框對象 const rectangle = new BMap.Polygon([ new BMap.Point(this.rectangle[3], this.rectangle[2]), //rectangle后臺返回的坐標 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); // 設置地圖視野，使得矩形框完全顯示在地圖視野內 this.map.setViewport(rectangle.getPath());
（4）創(chuàng)建圓形對象
// 創(chuàng)建圓心坐標 const center = new BMap.Point(this.rectangle[1], this.rectangle[0]);//rectangle后臺返回的圓形坐標 // 創(chuàng)建圓形標注對象 const circle = new BMap.Circle(center, this.scope_radius, this.styleOptions); // 將圓形標注添加到地圖上 this.map.addOverlay(circle);
以上就是vue項目引入百度地圖BMapGL鼠標繪制和BMap輔助工具的詳細內容，更多關于vue引入百度地圖BMapGL的資料請關注腳本之家其它相關文章！
您可能感興趣的文章:
- 解決Vue使用百度地圖BMapGL內存泄漏問題?Out?of?Memory
- vue中報錯“error‘xxx‘?is?defined?but?never?used”問題及解決
- Vue-cli3 $ is not defined錯誤問題及解決
- 解決Vue控制臺報錯Failed to mount component: template or render function not defined.
- vue報錯Cannot?read?properties?of?undefined?(...)類型的解決辦法
- vue在data中定義變量后依舊報undefined的解決
- 完美解決vue引入BMapGL is not defined的問題
相關文章
在我們的項目中需要用到django實現(xiàn)跨域的問題，本文通過示例代碼給大家詳細介紹django+vue實現(xiàn)跨域的方法，感興趣的朋友跟隨小編一起看看吧2022-03-03
這篇文章主要介紹了關于vue中標簽的屬性綁定值渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
關于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題
這篇文章主要介紹了關于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了5分鐘學會Vue動畫效果(小結),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue清除瀏覽器全部cookie的問題及解決方法(絕對有效!)
最近項目要實現(xiàn)關閉瀏覽器清除用戶緩存的功能,下面這篇文章主要給大家介紹了關于vue清除瀏覽器全部cookie的問題及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue 3 作為前端開發(fā)中一個非常流行的框架,在錯誤處理方面提供了靈活和強大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯誤,包括組件級的錯誤處理、全局錯誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下2024-07-07
Vue Components 數(shù)字鍵盤的實現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學習,這篇文章主要給大家介紹了關于如何一步步從零搭建一個Vue項目的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預覽
這篇文章主要為大家詳細介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預覽的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03