前言

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

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

接下來(lái)我將花點(diǎn)時(shí)間來(lái)說(shuō)說(shuō)如何實(shí)現(xiàn)和所遇到的坑

一、使用uniapp 原生的map 組件

查看uniapp 官網(wǎng)的map 的文檔：https://uniapp.dcloud.net.cn/component/map.html#注意如果沒(méi)有特定的聲明，那微信小程序默認(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: "測(cè)試1",
					width: 58,
					height: 58,
					latitude:31.23588,
					longitude:121.48053 ,
				}]
			}
		},

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

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

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

這樣就解決了偏差的問(wèn)題，順利爬出第一個(gè)坑。。。。。。。

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

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

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

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

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

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

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

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

js :

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

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

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

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

這些寫(xiě)完之后，在模擬機(jī)上顯示是可以的，但在真機(jī)上頭像缺不見(jiàn)了，因?yàn)楝F(xiàn)在這個(gè)圖像是從后端傳過(guò)來(lái)的，之前的頭像都是寫(xiě)死的，所以就出這個(gè)問(wèn)題了。

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

于是我換了種方式寫(xiě)法：

然后真機(jī)調(diào)試，蕪湖，開(kāi)心，總算出來(lái)了，功夫不負(fù)有心人?。。?/p>

六、實(shí)現(xiàn)聚合

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

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

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

八、總結(jié)

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

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

最新評(píng)論