寫一篇文章來記錄以下我在開發(fā)小程序地圖過程中遇到的兩個(gè)小坑吧，一個(gè)是點(diǎn)聚合，用的是joinCluster這個(gè)指令，另一個(gè)是polygon在地圖上劃分多邊形的問題：

1.首先說一下點(diǎn)聚合問題，由于之前沒有做過小程序地圖問題，所以瀏覽了很多資料，最終發(fā)現(xiàn)看的多了反而雜亂，而且這次要完成的不是地圖單點(diǎn)定位或者地圖導(dǎo)航，而是地圖撒點(diǎn)，在地圖上要顯示很多定位點(diǎn)，那么點(diǎn)數(shù)過多且覆蓋就成了一個(gè)要解決的問題，我上網(wǎng)搜了大量的資料，要么自己手寫，要么引入很多其它組件方式看起來比較復(fù)雜，直接說最簡單的結(jié)論，在撒的markers點(diǎn)內(nèi)部直接加一個(gè)joinCluster: true即可，藏在官方文檔marker介紹下的最下面：

?

然后最坑的來了，加了這個(gè)之后會發(fā)現(xiàn)微信開發(fā)者工具里面縮放地圖并沒有反應(yīng)，無論縮放地圖與否，都不會聚合，實(shí)際上這是開發(fā)者工具的問題，它是一個(gè)模擬器不能完全實(shí)現(xiàn)手機(jī)小程序上的所有功能，這時(shí)候如果打開真機(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頁面然后復(fù)制進(jìn)去直接運(yùn)行到微信小程序，之后啟動真機(jī)調(diào)試即可發(fā)現(xiàn)點(diǎn)聚合功能是實(shí)現(xiàn)了的，更多細(xì)節(jié)大家可以自行了解。

2.第二個(gè)問題是劃分多邊形的問題，我查閱了微信官方文檔上面說使用polygon即可：

?于是我使用了，但是無論我怎么填寫數(shù)據(jù)都沒用，一度懷疑自我，這時(shí)候發(fā)現(xiàn)還是要以uni-app官方文檔為準(zhǔn)，我死磕微信開發(fā)文檔導(dǎo)致自己懷疑自我，兩者有所區(qū)別，這是uni-app官方文檔的介紹：

?沒錯(cuò)，uni-app官方文檔顯示應(yīng)該加一個(gè)s，用的是polygons，所以僅僅加一個(gè)s即可，非常搞心態(tài)，而且即使是uni-app官網(wǎng)下方對于這個(gè)的介紹也沒加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é)果就是顯示一塊多邊形：

先說這么多，后續(xù)遇到什么問題我會繼續(xù)上傳的，諸君共勉。