寫一篇文章來(lái)記錄以下我在開(kāi)發(fā)小程序地圖過(guò)程中遇到的兩個(gè)小坑吧，一個(gè)是點(diǎn)聚合，用的是joinCluster這個(gè)指令，另一個(gè)是polygon在地圖上劃分多邊形的問(wèn)題：
1.首先說(shuō)一下點(diǎn)聚合問(wèn)題，由于之前沒(méi)有做過(guò)小程序地圖問(wèn)題，所以瀏覽了很多資料，最終發(fā)現(xiàn)看的多了反而雜亂，而且這次要完成的不是地圖單點(diǎn)定位或者地圖導(dǎo)航，而是地圖撒點(diǎn)，在地圖上要顯示很多定位點(diǎn)，那么點(diǎn)數(shù)過(guò)多且覆蓋就成了一個(gè)要解決的問(wèn)題，我上網(wǎng)搜了大量的資料，要么自己手寫，要么引入很多其它組件方式看起來(lái)比較復(fù)雜，直接說(shuō)最簡(jiǎn)單的結(jié)論，在撒的markers點(diǎn)內(nèi)部直接加一個(gè)joinCluster: true即可，藏在官方文檔marker介紹下的最下面：
?
然后最坑的來(lái)了，加了這個(gè)之后會(huì)發(fā)現(xiàn)微信開(kāi)發(fā)者工具里面縮放地圖并沒(méi)有反應(yīng)，無(wú)論縮放地圖與否，都不會(huì)聚合，實(shí)際上這是開(kāi)發(fā)者工具的問(wèn)題，它是一個(gè)模擬器不能完全實(shí)現(xiàn)手機(jī)小程序上的所有功能，這時(shí)候如果打開(kāi)真機(jī)調(diào)試或者二維碼預(yù)覽即可發(fā)現(xiàn)點(diǎn)聚合功能是可以實(shí)現(xiàn)的，下面給大家一段代碼：
<template>
<view class="base_body">
<map :markers="markers" id="map1" style="width: 100%; height: 100vh;" :latitude="latitude"
:longitude="longitude">
<cover-view slot="callout">
<block v-for="(item,index) in markers" :key="index">
<cover-view class="customCallout" :marker-id="item.id">
<cover-view class="content">
{{item.title}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
map: '',
latitude: 39.890, // 地圖默認(rèn)顯示的維度
longitude: 116.39752, // 地圖默認(rèn)顯示的緯度
markers: [{ // 標(biāo)記點(diǎn)
id: 1,
latitude: 39.890,
longitude: 116.39752,
title: "點(diǎn)擊提示1",
joinCluster: true,
}, {
id: 2,
latitude: 39.891,
longitude: 116.39752,
title: "點(diǎn)擊提示2",
joinCluster: true,
}, {
id: 3,
latitude: 39.892,
longitude: 116.39752,
title: "點(diǎn)擊提示3",
joinCluster: true,
}, {
id: 4,
latitude: 39.893,
longitude: 116.39752,
title: "點(diǎn)擊提示4",
joinCluster: true,
}, ],
}
},
onLoad() {
},
onReady() {},
methods: {
}
}
</script>
<style>
.base_body {
width: 100%;
height: 100%;
position: absolute;
}
/* 水平，垂直居中 */
.base_all_center {
justify-content: center;
align-items: center;
}
/* 垂直居中 */
.base_center_vertical {
display: flex;
align-items: center;
}
/* 水平居中 */
.base_center_horizontal {
display: flex;
justify-content: center;
}
/* 垂直布局 */
.base_column {
display: flex;
flex-direction: column;
}
/* 橫向布局 */
.base_row {
display: flex;
flex-direction: row;
}
/* 基礎(chǔ)dialog */
.base_dialog {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.5);
}
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
width: 150px;
height: 40px;
display: inline-flex;
padding: 5px 20px;
justify-content: center;
align-items: center;
}
.content {
flex: 0 1 auto;
margin: 0 10px;
font-size: 14px;
}
</style>
這一段代碼不需要有任何修改，直接新建一個(gè)demo頁(yè)面然后復(fù)制進(jìn)去直接運(yùn)行到微信小程序，之后啟動(dòng)真機(jī)調(diào)試即可發(fā)現(xiàn)點(diǎn)聚合功能是實(shí)現(xiàn)了的，更多細(xì)節(jié)大家可以自行了解。
2.第二個(gè)問(wèn)題是劃分多邊形的問(wèn)題，我查閱了微信官方文檔上面說(shuō)使用polygon即可：
?于是我使用了，但是無(wú)論我怎么填寫數(shù)據(jù)都沒(méi)用，一度懷疑自我，這時(shí)候發(fā)現(xiàn)還是要以u(píng)ni-app官方文檔為準(zhǔn)，我死磕微信開(kāi)發(fā)文檔導(dǎo)致自己懷疑自我，兩者有所區(qū)別，這是uni-app官方文檔的介紹：
?沒(méi)錯(cuò)，uni-app官方文檔顯示應(yīng)該加一個(gè)s，用的是polygons，所以僅僅加一個(gè)s即可，非常搞心態(tài)，而且即使是uni-app官網(wǎng)下方對(duì)于這個(gè)的介紹也沒(méi)加s：
下面也給大家一段代碼是劃了一個(gè)多邊形，和上面一樣，直接復(fù)制代碼進(jìn)去運(yùn)行即可，不需要修改其它東西 ：
<template>
<view class="base_body">
<map :polygons="polygon" id="map1" style="width: 100%; height: 100vh;" :latitude="latitude"
:longitude="longitude">
<cover-view slot="callout">
<block v-for="(item,index) in markers" :key="index">
<cover-view class="customCallout" :marker-id="item.id">
<cover-view class="content">
{{item.title}}
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
map: '',
latitude: 39.890, // 地圖默認(rèn)顯示的維度
longitude: 116.39752, // 地圖默認(rèn)顯示的緯度
polygon: [{
points: [{
latitude: 39.890,
longitude: 116.39752
},
{
latitude: 39.891,
longitude: 116.39852
},
{
latitude: 39.892,
longitude: 116.39852
},
{
latitude: 39.893,
longitude: 116.39752
},
],
strokeWidth: "2",
strokeColor: "#2223FD",
fillColor: "#9FA4F6"
}, ],
}
},
}
</script>
<style>
.base_body {
width: 100%;
height: 100vh;
position: absolute;
}
/* 水平，垂直居中 */
.base_all_center {
justify-content: center;
align-items: center;
}
/* 垂直居中 */
.base_center_vertical {
display: flex;
align-items: center;
}
/* 水平居中 */
.base_center_horizontal {
display: flex;
justify-content: center;
}
/* 垂直布局 */
.base_column {
display: flex;
flex-direction: column;
}
/* 橫向布局 */
.base_row {
display: flex;
flex-direction: row;
}
/* 基礎(chǔ)dialog */
.base_dialog {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.5);
}
.customCallout {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
width: 150px;
height: 40px;
display: inline-flex;
padding: 5px 20px;
justify-content: center;
align-items: center;
}
.content {
flex: 0 1 auto;
margin: 0 10px;
font-size: 14px;
}
</style>
最終結(jié)果就是顯示一塊多邊形：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-681072.html
先說(shuō)這么多，后續(xù)遇到什么問(wèn)題我會(huì)繼續(xù)上傳的，諸君共勉。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-681072.html
到了這里，關(guān)于uni-app開(kāi)發(fā)小程序中遇到的map地圖的點(diǎn)聚合以及polygon劃分區(qū)域問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
