前端小技能之Vue集成百度離線地圖功能總結(jié)
引言
工作中遇到了一個需求，要在內(nèi)網(wǎng)使用百度地圖，那么肯定就是離線的地圖了，查閱了一些博文，開發(fā)過程中也遇到了各種各樣的問題，在此做下記錄，希望帶大家避坑，也給自己這兩天的開發(fā)做一下總結(jié)。
需求：
- 內(nèi)網(wǎng)中使用百度地圖
- 僅展示鄭州市地圖，并將鄭州市地圖輪廓圈出
- 支持繪制點
- 支持繪制線
- 支持多點聚合
技術(shù)棧
- Vue2
- BMap
效果圖
開始
1、項目搭建
vue腳手架搭建不再贅述，默認(rèn)此刻你已經(jīng)創(chuàng)建好一個vue-cli項目，此時，在public文件夾下創(chuàng)建文件夾static，將我們所需要的資源放到這個文件夾里，文件后續(xù)有給出。注意路徑，一定注意路徑，踩坑很久，文件中路徑已經(jīng)改好。
2、文件說明及避坑大法
- images：地圖中圖標(biāo)，例如：樹、建筑物等
- modules： 所需要的js模塊
- bmap_offline_api_v3.0.min.js: 創(chuàng)建地圖，包含各種地圖上操作的api等
- m4.png: 聚合圖標(biāo)，上圖中的紫色圖（可根據(jù)項目風(fēng)格進(jìn)行替換）
- 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中進(jìn)行配置服務(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進(jìn)行對應(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,
然后在對應(yīng)文件夾中使用：serve 你的文件夾名開啟本地服務(wù)，此刻，圖片也可以用鏈接地址進(jì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、地圖加載不出來
注意：瓦片圖路徑出錯會導(dǎo)致地圖加載出錯。一定要看配置路徑，js加載不到也是路徑問題，路徑問題！?。?！
3、地圖搭建準(zhǔn)備工作
1、容器
跟平時一樣，準(zhǔn)備一個地圖容器，設(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)建點坐標(biāo)
this.map.centerAndZoom(point, 10) // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別
//添加地圖類型控件
this.map.setMinZoom(10)
this.map.setMaxZoom(18)
this.map.enableScrollWheelZoom(true) //開啟鼠標(biāo)滾輪縮放
// 添加點
this.addMarker()
// 添加線
this.addLine()
// 添加鄭州市的輪廓線
this.addBorderLine()
},
3、添加點、添加點聚合
addMarker() {
let BMap = window.BMap
let BMapLib = window.BMapLib
// 初始化要顯示的點的坐標(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)建點坐標(biāo)
var point1 = new BMap.Point(113.6001, 34.61468) // 創(chuàng)建點坐標(biāo)
var point2 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點坐標(biāo)
var point3 = new BMap.Point(113.9001, 34.63468) // 創(chuàng)建點坐標(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)建點坐標(biāo)
let point1 = new BMap.Point(113.7001, 34.62468) // 創(chuàng)建點坐標(biāo)
let polyline = new BMap.Polyline([point, point1], {
strokeColor: 'red',
strokeWeight: 1,
strokeOpacity: 1,
})
this.map.addOverlay(polyline)
},
5、繪制城市邊緣
這個數(shù)據(jù)我們可以通過在線地圖API進(jìn)行獲取，獲取到以后將數(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)建點坐標(biāo)
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中進(jìn)行開發(fā)的，我這邊在此基礎(chǔ)之上集成到了vue中，并添加了我們的需求實現(xiàn)，查看的鏈接太多了！
總結(jié)
到此這篇關(guān)于前端小技能之Vue集成百度離線地圖功能的文章就介紹到這了,更多相關(guān)Vue集成百度離線地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?uni-app框架實現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺2022-09-09
下面小編就為大家分享一篇使用vue toggle實現(xiàn)點擊切換class的示例。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue2 v-model/v-text 中使用過濾器的方法示例
這篇文章主要介紹了vue2 v-model/v-text 中使用過濾器的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue.js頁面加載執(zhí)行created,mounted的先后順序說明
這篇文章主要介紹了vue.js頁面加載執(zhí)行created,mounted的先后順序說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue實現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買電影票，很多朋友不知道她的功能是怎么實現(xiàn)的，作為我程序員一枚對它的算法很好奇，今天小編就把基于Vue實現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue 計算屬性和偵聽器的使用小結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
最近在做一個類似課程表的需求,需要自制一個日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實現(xiàn)一個日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3使用vite搭建的項目需要安裝的插件/配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue實現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12