地圖開發(fā)（一）
今天介紹的地圖功能是小程序API里比較好玩的一個(gè)，所以我先試嘗試了一下，而且這部分也比較容易被讀者接收。那我們現(xiàn)在開始講這部分的內(nèi)容吧。
先來看看微信小程序地圖的文檔內(nèi)容！
首先，跟著圖片去查找一下地圖的組件，我們可以看到有很多屬性，額~一般人看到這些都會(huì)頭暈。不過你認(rèn)真閱讀就會(huì)知道這些屬性對(duì)應(yīng)著什么，根據(jù)英文對(duì)應(yīng)就能理解?？赐杲M件，我們嘗試一下編寫這個(gè)組件。創(chuàng)建應(yīng)用這個(gè)就不用我多說了，使用過開發(fā)工具的朋友應(yīng)該多很清楚。這個(gè)例子使用的是最簡(jiǎn)單的初始項(xiàng)目來做的。
請(qǐng)看下圖結(jié)構(gòu)：
注意看里面的代碼，我在wxml內(nèi)編寫了地圖的組件，一個(gè)<view/>內(nèi)包含了一個(gè)<map/>標(biāo)簽，這里我使用了幾個(gè)比較常用的屬性
這幾個(gè)屬性依次分別表示：
class="map" 類名
scale="12" 縮放級(jí)別（取值范圍為5-18）
show-location="true" 顯示帶有方向的當(dāng)前定位點(diǎn)
latitude="{{latitude}}" 緯度
longitude="{{longitude}}" 經(jīng)度
markers="{{markers}}" 標(biāo)記點(diǎn)（這個(gè)標(biāo)記是一個(gè)Array類型的數(shù)據(jù)）
這里使用了數(shù)據(jù)綁定，花括號(hào){{}}對(duì)應(yīng)的值，還不清楚數(shù)據(jù)綁定請(qǐng)去查看文檔，這里不累贅。
到這里我們就簡(jiǎn)單的編寫好了，來看一下樣子
簡(jiǎn)單實(shí)例
這里我用北京天安門廣場(chǎng)作為坐標(biāo)，不要問我怎么知道這個(gè)坐標(biāo)的，因?yàn)榘俣鹊貓D，騰訊地圖，高德地圖等都有個(gè)叫拾取器的東西。
好了我們繼續(xù)，難道這個(gè)地圖就只有這點(diǎn)功能嗎，其實(shí)不是的，還有很多功能，例如：路線規(guī)劃、查詢附近標(biāo)記點(diǎn)（這個(gè)需要一個(gè)接口，因?yàn)槭球v訊的地圖，所以最好用騰訊的WebService API）等；
還有這么多怎么講呢？沒事，我們慢慢看。講到這，只是使用了視圖層的顯示，現(xiàn)在開始就要使用API的方法了！
獲取位置-getLocation()
看到這個(gè)方法是不是很熟悉，使用過地圖的小伙伴都會(huì)知道這個(gè)跟SDK里的方法是一樣的，究竟怎么用
在開發(fā)工具內(nèi)index.js文件中Page內(nèi)寫了一個(gè)方法
wx.getLocation這就是微信小程序提供的獲取當(dāng)前位置的方法，我們看看他的具體參數(shù)
API參數(shù)說明
因?yàn)樵谖臋n可能看得不夠直觀，我編譯了一次，給大家看看獲取的數(shù)據(jù)
Object位置就是數(shù)據(jù)
嗯嗯，看到這大家都知道獲取的是經(jīng)緯度。那么拿到這個(gè)經(jīng)緯度應(yīng)該怎么用。那就要在成功獲取時(shí)，使用setData把之前的數(shù)據(jù)設(shè)置進(jìn)去。
設(shè)置后格式
初始化數(shù)據(jù)格式
編寫時(shí)要仔細(xì)認(rèn)真對(duì)比，這里我也踩坑了！
來看看效果
編譯后
可以看到之前是天安門廣場(chǎng)，然后獲取位置后就到獲取的位置了。
今天先說到這，說了一下<map/>組件的使用和簡(jiǎn)單的API方法。
地圖開發(fā)（二）
今天我來繼續(xù)講解剩下的方法和如何添加外部接口。
接下來跟著我一起看下吧。
看過文檔的小伙伴都知道，在API里還有幾個(gè)方法
文檔中API 的位置
昨天講了getLocation，今天繼續(xù)下面的幾個(gè)方法，看看究竟怎么用。
wx.chooseLocation
文檔介紹
這個(gè)方法很簡(jiǎn)單，我在wxml中添加了一個(gè)<button/>組件
index.wxml
然后設(shè)置一下樣式
index.wxss
綁定事件用（bindtap="方法"）即可，在bindtap綁定事件觸發(fā)時(shí)，會(huì)受到一個(gè)事件對(duì)象，這個(gè)不多解釋上圖簡(jiǎn)單說明即可
事件對(duì)象
來看看實(shí)際點(diǎn)擊效果如何
效果
wx.openLocation
首先看看文檔介紹，很直觀，沒有太多解析。
文檔中說這是一個(gè)打開地圖選擇位置，究竟什么樣子的呢？
這也不多解釋，直接代碼說話！
index.js文件內(nèi)容
因?yàn)檫@里使用了一個(gè)<button/>組件，所以我們還要看一下index.wxml文件
index.wxml文件
到這里這個(gè)方法就解釋完了，置于openLocation需要設(shè)置的數(shù)據(jù)都在上圖內(nèi)了，還有注釋；
讓我們來點(diǎn)擊一下看看效果
效果
看完以上效果，個(gè)人感覺動(dòng)態(tài)的更好。就是點(diǎn)擊按鈕跳轉(zhuǎn)到微信自帶地圖，然后可以設(shè)置地點(diǎn)，然后還可以發(fā)送。因?yàn)樵谀M器里，所以就沒演示發(fā)送了，看完這篇文章可以去嘗試下，還有在模擬器里定位會(huì)失敗，最好在真機(jī)測(cè)試看看。還有一個(gè)API（wx.createMapContext）就下次重點(diǎn)說。因?yàn)檫@個(gè)是添加地圖組件的，地圖還有很多功能等待大家去發(fā)掘，所以今天就說道這。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。