最近需要在小程序中做一個(gè)點(diǎn)位圖，用于展示不同點(diǎn)位，且根據(jù)地圖不同的縮放級(jí)別，實(shí)現(xiàn)多點(diǎn)位的聚合和分裂效果，使用uniapp提供的map組件，官方文檔
實(shí)現(xiàn)效果：
代碼如下：
-
使用地圖組件，需要初始化經(jīng)緯度
<map
id="map"
style="width: 100%; height: 100vh;"
latitude="39.904989"
longitude="116.405285"
:show-location="true"
:scale="mapScale"
:max-scale="19"
@markertap="bindMarkerTap"
></map>2. 授權(quán)獲取用戶位置信息
2.1 用戶授權(quán)
getAuthSetting() {
// 獲取用戶的授權(quán)信息
let authSetting = this.$store.state.authSetting
// 判斷用戶是否授權(quán)
if(!authSetting['scope.userLocation']) {
// 如果沒有授權(quán)，則調(diào)起授權(quán)面板
uni.authorize({
scope:"scope.userLocation",
success: () => {
// 用戶同意授權(quán)后，獲取用戶位置信息
this.getUserLocation()
},
fail() {
// 用戶拒絕授權(quán)，彈框提示
uni.showModal({
title: '提示',
content: '若點(diǎn)擊不授權(quán)，將無法使用位置功能',
cancelText: '不授權(quán)',
cancelColor: '#999',
confirmText: '授權(quán)',
confirmColor: '#f94218',
success: (resp) => {
if(resp.confirm) {
// 選擇彈框內(nèi)授權(quán)，調(diào)起設(shè)置界面進(jìn)行授權(quán)
uni.openSetting({
success: (resp) => {
// 授權(quán)信息保存在vuex中
this.$store.commit('setAuthSetting',resp.authSetting)
// 授權(quán)成功后，獲取用戶位置信息
this.getUserLocation()
}
})
}else if(resp.cancel) {
// 選擇彈框內(nèi) 不授權(quán)
uni.showToast({
title: '無法獲取位置信息，請(qǐng)去授權(quán)',
icon: 'none'
})
}
}
})
}
})
}else {
// 用戶已授權(quán)，則直接獲取位置信息
this.getUserLocation()
}
}3.? 獲取用戶位置信息，uniapp的api `uni.getLocation` 在小程序中只能獲取到用戶的經(jīng)緯度，我這里需要使用用戶的詳細(xì)地址，所以使用了騰訊地圖的api ，在騰訊位置服務(wù)平臺(tái)申請(qǐng)key值，下載sdk包
3.1 導(dǎo)入騰訊地圖位置服務(wù)sdk包
import QQMapWX from "../../static/js/qqmap-wx-jssdk.min.js";
// 獲取騰訊地圖api
let qqmapsdk = new QQMapWX({ key: "你自己申請(qǐng)的key" });3.2?獲取用戶當(dāng)前經(jīng)緯度以及詳細(xì)地址
getUserLocation() {
uni.getLocation({
type: "gcj02",
success:(res) => {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
const location = {
latitude: res.latitude,
longitude: res.longitude
}
let data = {}
// 調(diào)用騰訊地圖api，獲取用戶詳細(xì)地址
qqmapsdk.reverseGeocoder({
location,
success: res => {
data = {
...location,
address: res.result.address_component.city
}
// 用戶經(jīng)緯度和詳細(xì)地址保存到vuex中
this.$store.commit('setUserAddress',data)
// 調(diào)用渲染地圖的函數(shù)
this.createMapContext()
},
fail: error => {
console.log('err',error)
}
})
},
fail: (error) => {
uni.showToast({
title: '獲取位置信息失??！',
icon: 'none',
success: function(res) {
this.$store.commit('setAuthSetting',{'scope.userLocation': false})
}
})
}
})
}4.?渲染地圖
4.1 初始化地圖，創(chuàng)建點(diǎn)聚合，api文檔文章來源：http://www.zghlxwxcb.cn/news/detail-598850.html
createMapContext() {
// 創(chuàng)建地圖對(duì)象
this._mapContext = uni.createMapContext("map", this);
// 僅調(diào)用初始化，才會(huì)觸發(fā) on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({ // 初始化點(diǎn)聚合的配置
enableDefaultStyle: false, // 是否使用默認(rèn)樣式
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
// 新的聚合簇產(chǎn)生時(shí)觸發(fā)
this._mapContext.on("markerClusterCreate", (e) => {
let clusterMarkers = []
const clusters = e.clusters // 新產(chǎn)生的聚合簇
clusters.forEach((cluster,index) => {
const {
center, // 聚合點(diǎn)的經(jīng)緯度數(shù)組
clusterId, // 聚合簇id
markerIds // 已經(jīng)聚合了的標(biāo)記點(diǎn)id數(shù)組
} = cluster
let clusterObj = {
clusterId, //必須
...center,
width: 0,
height: 0,
iconPath: '',
label: {// 定制聚合簇樣式
content: markerIds.length + '',
fontSize: 16,
color: '#fff',
width: 50,
height: 50,
bgColor: '#419afcD9',
borderRadius: 25,
textAlign: 'center',
anchorX: -10,
anchorY: -35,
}
}
clusterMarkers.push(clusterObj)
})
// 添加聚合簇
this._mapContext.addMarkers({
markers:clusterMarkers,
clear: false, //是否先清空地圖上所有的marker
})
});
}4.2 獲取點(diǎn)標(biāo)記的經(jīng)緯度，初始化添加所有點(diǎn)標(biāo)記文章來源地址http://www.zghlxwxcb.cn/news/detail-598850.html
// 調(diào)接口獲取所有點(diǎn)標(biāo)記經(jīng)緯度
// 添加點(diǎn)標(biāo)記
addMarkers() {
let markers = []
let iconPath = ''
this.markersOptions.forEach((item,index) => {
//根據(jù)點(diǎn)位類型不同，定義不同的標(biāo)記icon
switch(item.type) {
case 1:
iconPath = '../../static/school-point.png'
break;
case 2:
iconPath = '../../static/hospital-point.png'
break;
case 3:
iconPath = '../../static/company-point.png'
break;
case 4:
iconPath = '../../static/other- point.png'
}
let markerObj = {
width: 45,
height: 45,
id: item.id,
iconPath,
latitude: Number(item.lat),
longitude: Number(item.lnt),
joinCluster: true, // 產(chǎn)生聚合簇，需添加該屬性
zIndex: 99999,
anchor: {
x: .5,
y: 1
}
}
const newMarker = Object.assign({},markerObj)
markers.push(newMarker)
})
this._mapContext.addMarkers({
markers,
clear: this.ishandel?true:false, // 是否先清空地圖上所有marker
})
},到了這里，關(guān)于unipp小程序map組件，實(shí)現(xiàn)點(diǎn)聚合，并自定義點(diǎn)聚合樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
