作者：BloodyMandoo    原文：//blog.csdn.net/bloodymandoo/article/details/72885460

1、獲取位置

wx.getLocation(OBJECT) 
獲取當前的(de)地理(li)位置、速度。當用(yong)戶(hu)離開(kai)小程序后(hou)，此接口無法調用(yong)；當用(yong)戶(hu)點(dian)擊“顯示在聊天(tian)頂(ding)部”時，此接口可繼續調用(yong)。

1. [javascript] view plain copy
2. var that=this;
3. wx.getLocation({
4. type: 'wgs84',
5. success: function (res) {
6. var latitude = res.latitude
7. var longitude = res.longitude
8. var speed = res.speed
9. var accuracy = res.accuracy
10. var altitude = res.altitude
11. var verticalAccuracy = res.verticalAccuracy
12. var horizontalAccuracy = res.horizontalAccuracy
13. that.setData({
14. longitude: longitude,
15. latitude: latitude,
16. speed: speed,
17. accuracy: accuracy,
18. altitude: altitude,
19. verticalAccuracy: verticalAccuracy,
20. horizontalAccuracy: horizontalAccuracy
21. })
22. }
23. })

wx.chooseLocation(OBJECT)  打開地圖(tu)選(xuan)擇位置

2、查看位置

wx.openLocation(OBJECT)  ? 使用微信內置地圖(tu)查看位置

1. wx.getLocation({
2. type: 'gcj02', //返回可以用于wx.openLocation的經緯度
3. success: function(res) {
4. var latitude = res.latitude
5. var longitude = res.longitude
6. wx.openLocation({
7. latitude: latitude,
8. longitude: longitude,
9. scale: 28
10. })
11. }
12. })

3、地圖組件控制

wx.createMapContext(mapId)  創建并返回 map 上(shang)下文 mapContext 對(dui)(dui)象  mapContext  mapContext 通過 mapId 跟一個 組件綁(bang)定，通過它可以操作對(dui)(dui)應(ying)的 組件。  mapContext 對(dui)(dui)象的方(fang)法列(lie)表

方法 參數(shu) 說(shuo)明(ming) 最低(di)版本  getCenterLocation OBJECT 獲取當(dang)(dang)前地圖中心(xin)(xin)的(de)經(jing)緯(wei)度(du)，返回的(de)是 gcj02 坐標系(xi)，可(ke)以用于 wx.openLocation  moveToLocation 無 將(jiang)地圖中心(xin)(xin)移(yi)(yi)動到當(dang)(dang)前定(ding)位點，需要(yao)配合map組件的(de)show-location使用  translateMarker OBJECT 平移(yi)(yi)marker，帶動畫 1.2.0  includePoints OBJECT 縮放視野展(zhan)示所有經(jing)緯(wei)度(du) 1.2.0  getCenterLocation 的(de) OBJECT 參數(shu)列表

參數(shu) 類(lei)型 必填 說明  success Function 否 接(jie)口調(diao)用成功的回(hui)調(diao)函(han)數(shu) ，res = { longitude: "經度", latitude: "緯度"}  fail Function 否 接(jie)口調(diao)用失敗的回(hui)調(diao)函(han)數(shu)  complete Function 否 接(jie)口調(diao)用結束的回(hui)調(diao)函(han)數(shu)（調(diao)用成功、失敗都(dou)會執行）  translateMarker 的 OBJECT 參數(shu)列表(biao)

參數 類型 必填 說明(ming)  markerId Number 是 指(zhi)定marker  destination Object 是 指(zhi)定marker移動到的目標點  autoRotate Boolean 是 移動過程中是否自動旋轉marker  duration Number 否 動畫(hua)持續(xu)時長(chang)，默認值1000ms，平移與旋轉分(fen)別計算  animationEnd Function 否 動畫(hua)結束回調函數  includePoints 的 OBJECT 參數列(lie)表

參數(shu) 類(lei)型 必填(tian) 說(shuo)明(ming)  points Array 是 要顯示在可視區域內(nei)的(de)坐標點(dian)列表，[{latitude, longitude}]  padding Array 否 坐標點(dian)形(xing)成的(de)矩形(xing)邊緣到地圖(tu)邊緣的(de)距離，單位像(xiang)素(su)。格式為[上(shang),右,下,左]，安(an)卓上(shang)只能識別(bie)數(shu)組第(di)一項，上(shang)下左右的(de)padding一致。開發者(zhe)工(gong)具暫不支持(chi)padding參數(shu)。

1. <!-- map.wxml -->
2. <map id="myMap" show-location />
3.  
4. <button type="primary" bindtap="getCenterLocation">獲取位置</button>
5. <button type="primary" bindtap="moveToLocation">移動位置</button>
6. <button type="primary" bindtap="translateMarker">移動標注</button>
7. <button type="primary" bindtap="includePoints">縮放視野展示所有經緯度</button>

1. // map.js
2. Page({
3. onReady: function (e) {
4. // 使用 wx.createMapContext 獲取 map 上下文
5. this.mapCtx = wx.createMapContext('myMap')
6. },
7. getCenterLocation: function () {
8. this.mapCtx.getCenterLocation({
9. success: function(res){
10. console.log(res.longitude)
11. console.log(res.latitude)
12. }
13. })
14. },
15. moveToLocation: function () {
16. this.mapCtx.moveToLocation()
17. },
18. translateMarker: function() {
19. this.mapCtx.translateMarker({
20. markerId: 0,
21. autoRotate: true,
22. duration: 1000,
23. destination: {
24. latitude:23.10229,
25. longitude:113.3345211,
26. },
27. animationEnd() {
28. console.log('animation end')
29. }
30. })
31. },
32. includePoints: function() {
33. this.mapCtx.includePoints({
34. padding: [10],
35. points: [{
36. latitude:23.10229,
37. longitude:113.3345211,
38. }, {
39. latitude:23.00229,
40. longitude:113.3345211,
41. }]
42. })
43. }
44. })