uniapp實現(xiàn)地圖點聚合功能的詳細教程
更新時間：2022年12月10日 09:34:45 作者：邊中之城
最近公司項目需求需要對設(shè)備在地圖上面進行監(jiān)控,并在當設(shè)備一定距離時進行聚合,這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)地圖點聚合功能的相關(guān)資料,需要的朋友可以參考下
任務(wù)
在工作中接到的一個任務(wù)，在app端實現(xiàn)如下功能：
- 地圖點聚合
- 地圖頁面支持tab切換（設(shè)備、勞務(wù)、人員）
- 支持人員搜索顯示分布
但是uniapp原有的map標簽不支持點聚合功能（最新的版本支持了點聚合功能），所以采取了hybrid 原生html文件開發(fā)的方式
最新的版本map已支持，如下：
效果圖
h5的效果圖，與真機有點偏差
生成頁面
在pages.json中定義distribution.vue頁面
{
"path": "pages/distribution/distribution",
"style": {
"navigationBarTitleText": "人機分布",
"navigationBarTextStyle": "black"
}
},頁面結(jié)構(gòu)主要分為三個部分：頂部標題，tab切換，地圖畫布
頂部標題
頂部標題就不用講了，一般打開微信小程序頁面或者app頁面，都是左—返回，中—標題，右—其他。存在默認設(shè)置，但這里的話存在web-view（web 瀏覽器組件，可以用來承載網(wǎng)頁的容器），很有可能將頂部標題覆蓋掉，所以使用自定義標題，具體實現(xiàn)如下：
<view class="tab">
<!-- :isBack="true" -->
<tab-left bgColor="bg-gradual-white" :isBack="true" :url="gobackurl">
<block slot="backText">返回</block>
<block slot="content">人機分布</block>
</tab-left>
</view>tab切換
主要實現(xiàn)設(shè)備/勞務(wù)/人員的tab切換，固定在app內(nèi)容頂部，難點在于tab切換時，需要實現(xiàn)頁面和html頁面通信，改變地圖內(nèi)容，主要需要做以下幾個功能：
- 調(diào)用接口（getNavInfo）獲取maplists信息
// 獲取導航欄數(shù)值
getNav(){
let params={
ProjectId:this.projectId,
OrgCode:this.orgcode
}
Api.getNavInfo(params).then(res=>{
console.log('嘻嘻',res)
if(res.data.length>0){
res.data.forEach((item,index)=>{
this.maplists[index].number=item
})
}else{
uni.showToast({
title:'獲取導航欄數(shù)值失敗',
icon:'none'
})
}
})
},- 切換tab時，實現(xiàn)與頁面和html的通信
swichNav(item) {
// this.reportisChoose = parseInt(e.currentTarget.id - 1);
// this.url += encodeURIComponent(JSON.stringify([{'s':1111}]));
item.check=!item.check
if(item.check){
this.maker.push(item.id)
}else{
let index=0
this.maker.forEach((x,i)=>{
if(x===item.id){
index=i
}
})
this.maker.splice(index,1)
}
console.log('this.makerxxx',this.maker)
this.url ='../../hybrid/html/map.html?'+ "access_token="+this.token+"&maker="+JSON.stringify(this.maker)+"&baseUrl="+this.baseUrl+"&projectId=" + this.projectId+"&OrgCode="+this.orgcode
},地圖畫布
地圖畫布主要是嵌入map.html，這里主要是用到了web-view，需要注意以下兩個地方：
web-view：一般是占滿全屏的，優(yōu)先級最高，所以會覆蓋tab部分，故要設(shè)定高度或者top值，
主要實現(xiàn)如下：
// 獲取設(shè)備信息
getEqData() {
let _this=this
console.log('進來來');
let projectId = this.$store.state.user.projectId;
Api.getEqlocation(projectId).then(res => {
if (res.data.success) {
this.eqData = res.data.data;
console.log('結(jié)果是', this.eqData);
this.eqData.forEach(item=>{
item['x']=this.longitude+Math.random(0,1000)
item['y']=this.latitude+Math.random(0,1000)
item['text']='設(shè)備信息'
item['path']='../../static/01.png'
})
}
})
},
// 獲取屏幕高度
getwh() {
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
console.log('windowWidth, windowHeight', windowWidth, windowHeight);
this.height = windowHeight;
this.width = windowWidth;
let _this = this;
this.$nextTick(function() {
this.computeHeight();
this.setWebHeight()
});
},
// 設(shè)置web-view樣式
setWebHeight(){
let _this=this
console.log('height',this.$scope)
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview(); //獲取當前web-view
setTimeout(function(){
var wv = currentWebview.children()[0];
console.log('wv',wv);
wv.setStyle({
//設(shè)置web-view距離頂部的距離以及自己的高度，單位為px
top: _this.top,
height: _this.height,
// 雙指縮放
scalable:true
});
},1000)
// #endif
},
// 計算導航欄和頂部高度
computeHeight() {
let _this = this;
let info = uni.createSelectorQuery().select('.map-top-tab');
info.boundingClientRect(function(data) {
console.log('計算出來什么高度', data);
_this.top = data.height;
}).exec();
let info2=uni.createSelectorQuery().select('.tab')
info2.boundingClientRect(function(data) {
console.log('計算出來什么高度222', data);
_this.top += data.height;
_this.height = _this.height-_this.top;
}).exec();
console.log('sssssssssssssssss',this.height,this.top)
}- web-view嵌入本地網(wǎng)頁，主要放在
../../hybrid/html文件下，這個官網(wǎng)給出了建議和結(jié)構(gòu)圖，如下：
┌─components
├─hybrid
│ └─html
│ ├─css
│ │ └─test.css
│ ├─img
│ │ └─icon.png
│ ├─js
│ │ └─test.js
│ └─local.html
├─pages
│ └─index
│ └─index.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
map.html頁面設(shè)置
雖然是個html頁面，但主要是實現(xiàn)地圖點聚合（主要使用百度地圖api實現(xiàn)） 的功能，所以主要要引入以下幾個依賴：
<link rel="stylesheet" href="https//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" rel="external nofollow" /> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Ps5KaIdB9sSNUbDwECgTtBL7xluVv91s"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="js/MakerClusterer.js"></script> <script src="js/vue.min.js"></script> <script src="js/axios.js"></script>
實現(xiàn)頁面通信，分解url參數(shù)
created() {
axios.defaults.headers.post['Content-Type'] = 'application/json';
let _this = this
this.baseUrl = this.getQueryString('baseUrl')
this.projectId = this.getQueryString('projectId');
this.access_token_app = this.getQueryString('access_token');
this.OrgCode = this.getQueryString('OrgCode')
// console.log('傳過來的數(shù)據(jù)', this.baseUrl, this.projectId, this.access_token_app, this.OrgCode)
localStorage.setItem('baseUrl', this.baseUrl)
localStorage.setItem('access_token_app', this.access_token_app)
axios.defaults.headers.common['Authorization'] = "Bearer " + localStorage.getItem('access_token_app')
this.maker = this.getQueryString('maker')
// console.log('this.maker111', this.maker)
this.maker = JSON.parse(this.maker)
// console.log('this.maker', this.maker)
if (this.maker !== null) {
// 1--設(shè)備,2--勞務(wù),3--人員
this.maker.forEach(y => {
// 1--設(shè)備,2--勞務(wù),3--人員
switch (y) {
case 1:
console.log('進入設(shè)備區(qū)域了')
_this.getEqData()
break
case 2:
console.log('進入勞務(wù)區(qū)域了')
_this.getServiceData()
break
case 3:
console.log('進入人員區(qū)域了')
_this.getUserData()
break
}
})
}
this.$nextTick(function() {
_this.initMap()
})
},
mounted() {
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('當前環(huán)境：' + JSON.stringify(res));
});
});
},
methods:{
//取url中的參數(shù)值
getQueryString(name) {
// 正則：[找尋'&' + 'url參數(shù)名字' = '值' + '&']（'&'可以不存在）
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let r = window.location.search.substr(1).match(reg);
if (r != null) {
// 對參數(shù)值進行解碼
return r[2]
}
return null;
},
}初始化地圖
// 初始化地圖
initMap() {
// 百度地圖API功能
this.map = new BMap.Map("allmap");
// 初始化地圖,創(chuàng)建中心坐標和地圖實例
this.map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);
// this.map.addEventListener("tilesloaded",function(){alert("地圖加載完畢");})
// 啟用拖拽
// this.map.enableInertialDragging()
// this.map.enableScrollWheelZoom();
// 啟用雙指縮放
// this.map.enablePinchToZoom()
// this.map.addControl(new BMap.NavigationControl());
this.map.addControl(new BMap.ScaleControl());
this.map.addControl(new BMap.OverviewMapControl());
let temMap = this.map
// 添加帶有定位的導航控件，放大，縮小
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_RIGHT,
// 偏移值
offset: new BMap.Size(5, 50),
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 是否顯示級別
showZoomInfo: true,
// 啟用顯示定位
enableGeolocation: true
});
this.map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e) {
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
});
geolocationControl.addEventListener("locationError", function(e) {
// 定位失敗事件
alert(e.message);
});
this.map.addControl(geolocationControl);
},點聚合功能實現(xiàn)
主要起作用的是MarkerClusterer類
watch: {
markerArr(val) {
if (val != null) {
console.log('ccccc', val)
if (this.markerClusterer) {
this.markerClusterer.clearMarkers()
}
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {
markers: val
});
// 所有標記顯示在地圖內(nèi)
this.map.setViewport(this.pointArray)
console.log('當前地圖級別', this.map.getZoom())
}
},
}搜索功能實現(xiàn)
// 根據(jù)名稱搜索項目
searchByName() {
console.log('運動少殺殺殺', this.arrAll)
let markerByName = this.arrAll.filter(item => item.name.indexOf(this.keyword) !== -1)
console.log('過濾后的照片', markerByName)
if (markerByName.length === 0) {
alert('搜索內(nèi)容無定位信息，請重新搜索')
this.keyword = ''
return
}
// 設(shè)置最大級別數(shù)
// this.map.setMaxZoom(10)
this.markerArr = []
this.createDefineMarker(markerByName)
this.map.setViewport(this.pointArray)
console.log('當前地圖級別', this.map.getZoom())
},總結(jié)
到此這篇關(guān)于uniapp實現(xiàn)地圖點聚合功能的文章就介紹到這了,更多相關(guān)uniapp地圖點聚合功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
JavaScript可折疊區(qū)域?qū)崿F(xiàn)代碼
可折疊區(qū)域的基本思想：通過點擊某個地方來顯示或隱藏屏幕中的某個區(qū)域。2010-10-10
這篇文章主要介紹了淺談Webpack打包優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
參數(shù)有中包含空格且使用Post提交時須將空格轉(zhuǎn)換成加號,這樣后臺程序接受到的才是真正的空格,感興趣的朋友可以了解下2013-01-01
JS動態(tài)修改網(wǎng)頁body的背景色實例代碼
這篇文章主要介紹了JS動態(tài)修改網(wǎng)頁body的背景色實例代碼 ,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了前端實現(xiàn)序列幀動畫的多種方法,包括CSS動畫、JavaScript控制、Canvas繪制、SVG動畫和WebGL,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了js簡單獲取表單中單選按鈕值的方法,涉及javascript針對form表單元素的遍歷與查找相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了ES6 async、await的基本使用方法,結(jié)合實例形式分析了ES6 async、await的基本功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2020-06-06
下面小編就為大家?guī)硪黄獪\談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
js實現(xiàn)圖片區(qū)域可點擊大小隨意改變(適用移動端)代碼實例
這篇文章主要介紹了js實現(xiàn)圖片區(qū)域可點擊大小隨意改變(適用移動端)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09