微信小程序地圖（map）實例詳解

2019-11-19 18:58:00

字體：大中小

來源：轉載

供稿：網友

微信小程序地圖（map）實例

這里是小編對微信小程序地圖（map API ）做的資料整理，獲取當前的地址，應該如何實現的實例，大家可以看下。

今天做到地圖定位的模塊.模擬器肯定是獲取不到位置的.下面為真機測試結果.

上圖:

經緯度不說了.定位用的,我這里直接輸入的數字定位.但是有許多問題

下圖中scale是縮放比例,這個屬性目前無效.后期微信團隊應該會修復.畢竟現在剛開始公測.這樣就導致我不管怎么修改scale,我的地圖都是在默認的縮放比例.如上圖.

markers中的rotate是圖標的旋轉角度.如果需要平行于屏幕的圖標,那就設置為0吧.

另外,覆蓋物的圖標是可以修改的.給iconPath設置路徑即可.

上一段代碼:

<!--index.wxml--> <button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

//index.js //獲取應用實例 var app = getApp() Page({  data: {   latitude: 0,//緯度   longitude: 0,//經度   speed: 0,//速度   accuracy: 16,//位置精準度   markers: [],   covers: [],  },  onLoad: function () {  },  getlocation: function () {   var markers = [{    latitude: 31.23,    longitude: 121.47,    name: '浦東新區',    desc: '我的位置'   }]   var covers = [{    latitude: 31.23,    longitude: 121.47,    iconPath: '../images/car.png',    rotate: 0   }]   this.setData({    longitude: 121.47,    latitude: 31.23,    markers: markers,    covers: covers,   })  } })

2.wx.getLocation(OBJECT) 獲取當前位置API

紅色框標出的就是經緯度,速度,精確度

用gch02返回的坐標可以直接打開地圖.

具體api見文檔

3.wx.openLocation(OBJECT) 查看位置

最簡單粗暴的就是直接給經緯度定位.

代碼:

/index.js //獲取應用實例 var app = getApp() Page({  data: {   latitude: 0,//緯度   longitude: 0,//經度   speed: 0,//速度   accuracy: 16,//位置精準度   markers: [],   covers: [],  },  onLoad: function () {  },  getlocation: function () {   wx.getLocation({    type: 'gcj02',    success: function (res) {     var latitude = res.latitude     var longitude = res.longitude     var speed = res.speed     var accuracy = res.accuracy     console.log("latitude:" + latitude)     console.log("longitude:" + longitude)     console.log("speed:" + speed)     console.log("accuracy:" + accuracy)     wx.openLocation({      latitude: latitude,      longitude: longitude,      scale: 28     })    }   })  } })

真機測試效果圖: