前端小技能之Vue集成百度離線地圖功能總結(jié)
引言
工作中遇到了一個需求，要在內(nèi)網(wǎng)使用百度地圖，那么肯定就是離線的地圖了，查閱了一些博文，開發(fā)過程中也遇到了各種各樣的問題，在此做下記錄，希望帶大家避坑，也給自己這兩天的開發(fā)做一下總結(jié)。
需求：
- 內(nèi)網(wǎng)中使用百度地圖
- 僅展示鄭州市地圖，并將鄭州市地圖輪廓圈出
- 支持繪制點
- 支持繪制線
- 支持多點聚合
技術(shù)棧
- Vue2
- BMap
效果圖
開始
1、項目搭建
vue腳手架搭建不再贅述，默認此刻你已經(jīng)創(chuàng)建好一個vue-cli項目，此時，在public文件夾下創(chuàng)建文件夾static，將我們所需要的資源放到這個文件夾里，文件后續(xù)有給出。注意路徑，一定注意路徑，踩坑很久，文件中路徑已經(jīng)改好。
2、文件說明及避坑大法
- images：地圖中圖標，例如：樹、建筑物等
- modules： 所需要的js模塊
- bmap_offline_api_v3.0.min.js: 創(chuàng)建地圖，包含各種地圖上操作的api等
- m4.png: 聚合圖標，上圖中的紫色圖（可根據(jù)項目風(fēng)格進行替換）
- map_load.js: 初始化一些全局變量，包括文件路徑，瓦片圖加載路徑，動態(tài)加載bmap_offline_api_v3.0.min.js文件等
- MarkerClusterer_min.js: 實現(xiàn)點聚合
- TextIconOverlay_min.js: 點聚合相關(guān)
修改直通車：
1、瓦片圖路徑處理
map_load.js,在網(wǎng)上看博主寫的配置有tiles_dir,但是沒有tiles_path,就意味著只能將瓦片圖放置到自己項目中，圖片有很多很多，vue項目直接編譯崩潰，所以為了開發(fā)方便，我們還是將瓦片圖放置到服務(wù)器中，我們這邊做引入即可。在tiles_path中進行配置服務(wù)器地址。
踩坑1：注意：一定不要只對照map_laod.js來配置自己的js，一定要看bmap_offline_api_v3.0.js中瓦片地址的配置方法
let bmapcfg = {
'imgext' : '.png', //瓦片圖后綴
'tiles_dir' : 'tiles', //瓦片圖文件夾
'tiles_path' : 'http://localhost:5000/', //如果在服務(wù)器上，需要配置服務(wù)器地址
'tiles_hybrid': '',
'tiles_self' : ''
};
對應(yīng)bmap_offline_api_v3.0.js中模塊加載代碼，注意：你的可能跟我的不一樣，一定要跟map_load.js進行對應(yīng)。
var tdir = bmapcfg.tiles_path ? (bmapcfg.tiles_path + bmapcfg.tiles_dir) : bmapcfg.tiles_dir return tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext // 使用本地的瓦片
當然了，開發(fā)階段我們可以先將瓦片圖下載到本地，新建文件夾 dirName,
然后在對應(yīng)文件夾中使用：serve 你的文件夾名開啟本地服務(wù)，此刻，圖片也可以用鏈接地址進行訪問了
此刻配置我們的瓦片路徑：
let bmapcfg = {
'imgext' : '.png', //瓦片圖后綴
'tiles_dir' : 'tiles', //普通瓦片圖的地址，為空默認在 offlinemap/tiles/ 目錄
'tiles_path' : 'http://localhost:5000/',
...
};
2、模塊加載路徑配置
bmap_offline_api_v3.0.js
我們的模塊地址放置在 modules文件夾下，所以配置如下：
// 修改 加載本地模塊文件，在 modules 目錄下
console.log(a) //打印所需模塊
if (a.length > 0) {
for (i = 0; i < a.length; i++) {
mf = bmapcfg.home + 'modules/' + a[i] + '.js'
oa(mf)
}
} else {
f.kL()
}
3、地圖加載不出來
注意：瓦片圖路徑出錯會導(dǎo)致地圖加載出錯。一定要看配置路徑，js加載不到也是路徑問題，路徑問題！?。?！
3、地圖搭建準備工作
1、容器
跟平時一樣，準備一個地圖容器，設(shè)置容器大小
<template>
<div class="home">
<div id="container"></div>
</div>
</template>
<script>
....
</script>
<style lang="scss">
#container {
height: 100vh;
width: 100vw;
}
</style>
2、初始化
data() {
return {
map: null,
mapPoints: [],
markerClusterer: [],
}
},
初始化地圖
initMap() {
let BMap = window.BMap
this.map = new BMap.Map('container')
console.dir(this.map)
let point = new BMap.Point(113.5001, 34.60468) // 創(chuàng)建點坐標
this.map.centerAndZoom(point, 10) // 初始化地圖，設(shè)置中心點坐標和地圖級別
//添加地圖類型控件
this.map.setMinZoom(10)
this.map.setMaxZoom(18)
this.map.enableScrollWheelZoom(true) //開啟鼠標滾輪縮放
// 添加點
this.addMarker()
// 添加線
this.addLine()
// 添加鄭州市的輪廓線
this.addBorderLine()
},
3、添加點、添加點聚合
addMarker() {
let BMap = window.BMap
let BMapLib = window.BMapLib
// 初始化要顯示的點的坐標
this.initPoints()
let mapMarkers = []
this.mapPoints.forEach((point) => {
let marker = new BMap.Marker(point)
mapMarkers.push(marker)
this.map.addOverlay(marker)
})
let markerClusterer = new BMapLib.MarkerClusterer(this.map, {
markers: mapMarkers,
styles: [
{
url: './static/m4.png',
size: new BMap.Size(90, 90),
},
],
})
markerClusterer.setMinClusterSize(2)
this.markerClusterer = markerClusterer
},
initPoints() {
let BMap = window.BMap
var point = new BMap.Point(113.5001, 34.60468) // 創(chuàng)建點坐標
var point1 = new BMap.Point(113.6001, 34.61468) // 創(chuàng)建點坐標
var point2 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點坐標
var point3 = new BMap.Point(113.9001, 34.63468) // 創(chuàng)建點坐標
this.mapPoints.push(point)
this.mapPoints.push(point1)
this.mapPoints.push(point2)
this.mapPoints.push(point3)
},
4、添加線
addLine() {
let BMap = window.BMap
let point = new BMap.Point(113.5001, 34.60468) // 創(chuàng)建點坐標
let point1 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點坐標
let polyline = new BMap.Polyline([point, point1], {
strokeColor: 'red',
strokeWeight: 1,
strokeOpacity: 1,
})
this.map.addOverlay(polyline)
},
5、繪制城市邊緣
這個數(shù)據(jù)我們可以通過在線地圖API進行獲取，獲取到以后將數(shù)據(jù)保存到文件line.js中，將文件放置項目src/data文件夾下，便于我們離線使用
let boundary = new BMap.Boundary()
boundary.get('鄭州市', (rs) => {
// res: 鄭州市邊緣數(shù)據(jù)
})
添加邊緣數(shù)據(jù)：
addBorderLine() {
let BMap = window.BMap
let pointArr = []
dataLine.forEach((pointDetail) => {
var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 創(chuàng)建點坐標
pointArr.push(point)
})
let polyline = new BMap.Polyline(pointArr, {
strokeColor: 'red',
strokeWeight: 3,
strokeOpacity: 1,
})
this.map.addOverlay(polyline)
}
奉上項目地址：https://gitee.com/shanghaipingzi/offlinebmap
瓦片圖下載
提取百度網(wǎng)盤中文件，然后運行exe文件，選擇要下載的層級及地區(qū)即可
鏈接: https://pan.baidu.com/s/1zMEgtdaL2oBZ7vbl-LWeEQ
提取碼: hucc
文章借鑒了一個博主離線地圖的開源代碼，博主是在純html中進行開發(fā)的，我這邊在此基礎(chǔ)之上集成到了vue中，并添加了我們的需求實現(xiàn)，查看的鏈接太多了！
總結(jié)
到此這篇關(guān)于前端小技能之Vue集成百度離線地圖功能的文章就介紹到這了,更多相關(guān)Vue集成百度離線地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue.js項目初始化和構(gòu)建過程中,可能會遇到多種問題,首先,npm?install過程中報錯,如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時,若出現(xiàn)core-js相關(guān)錯誤2024-09-09
vue實現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標紅功能
這篇文章主要介紹了vue中實現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標紅,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
用vue的雙向綁定簡單實現(xiàn)一個todo-list的示例代碼
本篇文章主要介紹了用vue的雙向綁定簡單實現(xiàn)一個todo的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3中Slot插槽透傳,二次封裝Arco的table組件詳解
這篇文章主要介紹了Vue3中Slot插槽透傳,二次封裝Arco的table組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
如何解決Vue3組合式API模式下動態(tài)組件不渲染問題
這篇文章主要介紹了如何解決Vue3組合式API模式下動態(tài)組件不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教<BR>2024-03-03
這篇文章主要介紹了Vue中在新窗口打開頁面 及 Vue-router的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在 Vue.js 中,實例的掛載是一個非常重要的過程,它決定了 Vue 實例如何與 DOM 進行交互,通過分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過程的詳細步驟,需要的朋友可以參考下2024-11-11
vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實現(xiàn)菜單導(dǎo)航,通過點擊菜單項來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12