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