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