微信小程式地圖（map）實例詳解-小程式開發-PHP中文網

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

高洛峰

發布： 2017-02-15 12:46:00

原創

3666 人瀏覽過

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

這裡是小編對微信小程式地圖（map API ）所做的資料整理，取得目前的地址，大家可以看下去的實例，可以看下去。

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

上圖:

微信小程序地图（map）实例详解

緯度,我這裡直接輸入的數字定位.但是有許多問題

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

微信小程序地图（map）实例详解

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: &#39;浦东新区&#39;, 
   desc: &#39;我的位置&#39; 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: &#39;../images/car.png&#39;, 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

登入後複製

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  wx.getLocation({ 
   type: &#39;gcj02&#39;, 
   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 
    }) 
   } 
  }) 
 } 
})

登入後複製

ECT 微信小程序地图（map）实例详解
2.wo