前言

最近正在做小程序地圖，收到ui 給的圖，一開始以為很簡單的，但在看了ui 給的圖以后，發(fā)現(xiàn)沒有這么簡單。下面是ui給的圖：

于是花了很長的時間，走了很多坑才最終實現(xiàn)，來看效果鏈接：https://s19.aconvert.com/convert/p3r68-cdx67/2sq95-zprfy.gif圖片如下：

接下來我將花點時間來說說如何實現(xiàn)和所遇到的坑

一、使用uniapp 原生的map 組件

查看uniapp 官網(wǎng)的map 的文檔：https://uniapp.dcloud.net.cn/component/map.html#注意如果沒有特定的聲明，那微信小程序默認(rèn)調(diào)用的是騰訊地圖。template 代碼如下：

<!-- 這是地圖 -->
			<view class="page-section page-section-gap">
				<map :markers="markers" scale='18' :enable-satellite='checkedWeixin'  enable-building='true' 
				 style="width: 100%; height:calc(90vh);" :latitude="latitude" :longitude="longitude"
					id="map" ref='map' show-location='true' @callouttap='callouttap'>
				</map>
			</view>

js 的代碼如下：

data() {
			return {
			    checkedWeixin:false,
				latitude:31.23598 ,
				longitude: 121.48053 ,
				markers: [{
					id: 0,
					title: "測試1",
					width: 58,
					height: 58,
					latitude:31.23588,
					longitude:121.48053 ,
				}]
			}
		},

這樣寫完之后，你會得到一個地圖和一個定位坐標(biāo)點，不過樣式比較丑陋，坐標(biāo)點的圖標(biāo)也是原生的，當(dāng)然你可以采用自定義的圖標(biāo)，只需要在markers 里添加一個iconpPath ,具體的參數(shù)詳見上面的官網(wǎng)鏈接。

二、發(fā)現(xiàn)坑1

這個時候，如果你的坐標(biāo)是隨便亂寫的，你可能發(fā)現(xiàn)不了，但如果你刻意的使用某個具體位置的經(jīng)緯度坐標(biāo)，你就會發(fā)現(xiàn)，你從百度上找來的經(jīng)緯度復(fù)制進(jìn)去，在小程序的地圖上會有偏差，這是怎么回事？這是因為考慮到定位的特殊性和敏感性，然后不同的廠商的算法也不一樣，所以相同的經(jīng)緯度，在不同的地圖上顯示也不一樣了。解決：使用gcoord.js 這個可以自行去百度。故 js 的代碼也需要修改如下：

這樣就解決了偏差的問題，順利爬出第一個坑。。。。。。。

三、分析ui圖----發(fā)現(xiàn)坑2

分析ui 圖，不難發(fā)現(xiàn)，這個定位點，是有一個背景圖，然后再背景圖上有著不同頭像的圖片，這個，貌似用iconPath 貌似實現(xiàn)不了呀，這個時候，又陷入了另一個坑，也嘗試了很多種的方法，想著，用插槽，我單獨寫marker ，失敗，就在絕望的時候，我把uniapp 的官網(wǎng)向下滑動，發(fā)現(xiàn)了另一個東西

查閱資料發(fā)現(xiàn)，這兩個屬性可以用插槽單獨寫，到這里，想到了思路：首先改造template 的map 組件，如圖：

使用氣泡 callout的注意事項，網(wǎng)上查一查也都有

這里我寫了兩張圖，一個背景圖，一張人物圖，然后一張層級在上面，然后設(shè)置好對應(yīng)的定位，這樣就實現(xiàn)了背景圖上有頭像。

四、發(fā)現(xiàn)坑3

繼上面的步驟，有人會問，為什么要這樣是想呢？不直接給view 一個背景圖屬性，然后再用img 不就好， 我之前也是這樣是想的，奈何，虛擬機(jī)上可以，但到了真機(jī)上不行，后來查了資料才明白，是cover-view 的限制，至于為什么要在地圖上用cover-view ,具體大家可以去百度一下就知道了，還有為什么說cover-view 是個坑，大家百度一下也就知道了，他的第一個坑就是，不支持css 動畫，也就是效果上的定位點一上一下的效果，之前直接使用animate.css 就行了，唉，又是掉頭的一天，后面采用了uniapp 自己寫動畫，如下面：

<cover-image style='width: 50px;height: 58px;' src='https://images.hicling.com:9443/weixin/onlineBg.png'
:animation="animationData" />

js :

emmmmm,完美，這樣就又解決了一個坑，繼續(xù)。。。。。。。

四、發(fā)現(xiàn)坑4

本來以為寫完這個，會出現(xiàn)我想象中的東西，結(jié)果還有那個丑陋的原生的marker 圖標(biāo)，這，這，這，我這不是需要重新設(shè)置iconPath ,可設(shè)置成什么，在頁面上都會顯示的呀，后面想了個騷操作，我上傳一張透明的圖片不就好了，這樣不就沒了，嗯，就這個干，果然marker 圖標(biāo)就不見，完美?。?！

五、發(fā)現(xiàn)坑5 ----------------很重要，樓主花費了好長時間，愿大家都跳坑

這些寫完之后，在模擬機(jī)上顯示是可以的，但在真機(jī)上頭像缺不見了，因為現(xiàn)在這個圖像是從后端傳過來的，之前的頭像都是寫死的，所以就出這個問題了。

然后我發(fā)了好長好長時間，大概一個下午，真的推到重寫了很多很多次，網(wǎng)上也說可能是cover-iamge 的問題，然后我發(fā)現(xiàn)，可能是position的問題，之前的style 是這樣寫的,可能cover-image對position 無效

于是我換了種方式寫法：

然后真機(jī)調(diào)試，蕪湖，開心，總算出來了，功夫不負(fù)有心人?。?！

六、實現(xiàn)聚合

這功能可以根據(jù)地圖的比例，自動將相近的點聚合，然后顯示數(shù)字。

七、在app 上實現(xiàn)

在app 上實現(xiàn)的話，需要將vue 統(tǒng)一改成nvue了，具體的在這里也就不在敘述了，思路還是和上面一樣的，如果需要可以下面咨詢我

八、總結(jié)

經(jīng)歷了這些，感覺uniapp 和小程序的bug 確實有點多，但好在社區(qū)活躍的人比較多，大家集思廣益，方法總比問題多，最后如果覺得文章寫的不錯，麻煩大家點點贊?。?！

到此這篇關(guān)于uniapp 小程序和app map地圖上顯示多個酷炫動態(tài)的標(biāo)點效果(頭像后端傳過來)的文章就介紹到這了,更多相關(guān)uniapp 小程序 map地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論