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

更新時間：2016年11月16日 10:09:57 作者：dzp_coder

這篇文章主要介紹了微信小程序地圖（map）實例詳解的相關(guān)資料,這里對微信小程序的地圖API 進行了詳細介紹并附示例代碼和實現(xiàn)效果圖，需要的朋友可以參考下

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

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

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

上圖:

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

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

markers中的rotate是圖標的旋轉(zhuǎn)角度.如果需要平行于屏幕的圖標,那就設置為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,//經(jīng)度 
  speed: 0,//速度 
  accuracy: 16,//位置精準度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: '浦東新區(qū)', 
   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

紅色框標出的就是經(jīng)緯度,速度,精確度

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

具體api見文檔

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

最簡單粗暴的就是直接給經(jīng)緯度定位.

代碼:

/index.js 
//獲取應用實例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//緯度 
  longitude: 0,//經(jīng)度 
  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 
    }) 
   } 
  }) 
 } 
})

真機測試效果圖: