微信小程序地圖總結

小程序官方的 map地圖說明文檔已經非常詳細了，但是鑒於如果沒有一個合適的使用場景，對於剛接觸 map 的初級開發，看着這些繁雜又賊多的屬性名和字段，外加急切的開發需求，暈頭轉向是不可避免的了。接下來我會將自己在項目中對 map 的一些使用做一個總結，希望能幫助到正在開發的你。

請粗略的瀏覽下這兩篇介紹文檔，確保下面的內容看起來更通俗易懂

• 小程序官方地圖 map 文檔參考
• 小程序官方地圖 map 相關 API （地圖組件控制）參考

小程序不支持直接獲取到定位的地點信息，返回的是當前位置的經緯度，如果你需要用到 「逆地址解析」（將指定經緯度轉換為具體地址） 、「關鍵詞輸入提示」等功能，個人建議使用「騰訊位置服務微信小程序JavaScript SDK」，都是騰訊家的，在定位上的精准度要好得多，當然也可以使用百度、高德等小程序 API 服務。

• 微信位置服務SDK參考

先放上一張效果圖：開發工具的效果會差一點，真機上體驗還是不錯的，頂部的提示框的樣式在真機上顯示正常，在小程序開發工具上卻不居中。

先貼出 map 標簽 css 代碼，並對其中重要屬性進行說明.

  <map class='map' id='myMap' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" 
show-location="true" markers="{{markers}}" bindmarkertap="bindMakertap" bindcontroltap='controlTap' 
bindregionchange='regionChange' controls='{{controls}}'
      bindtap='bindMapTap'>

1. id ：map 組件的 id，在 wx.createMapContext(mapId, this) 中需要用到
2. longitude: map 組件的中心經度 latitude：map 組件的中心緯度
3. scale：縮放級別，取值范圍為5-18，默認為16
4. show-location：顯示帶有方向的當前定位點，即顯示代表當前位置的藍色定位點圖標，另外 mapContext 的moveToLocation()方法在官方文檔有着這樣的說明（將地圖中心移動到當前定位點，需要配合map組件的show-location使用）
5. markers：標記點用於在地圖上顯示標記的位置，是一個數組對象
6. bindmarkertap：點擊 marker 標記點時觸發
7. bindcontroltap：點擊控件時觸發
8. bindregionchange：拖動地圖觸發
9. controls：在地圖上顯示控件，控件不隨着地圖移動，是一個數組對象
10. bindtap： 點擊地圖時觸發（拖動地圖時不會觸發點擊）

---

下面給出我在項目中遇到的問題，以及一些功能的解決方案。

1、map 上無法顯示 view 等標簽

map 上放置常規標簽，在開發工具模擬器上能顯示，在真機卻顯示不出來。
原因：map 組件是由客戶端創建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。

這里有兩個解決方案，為了方便，此處采用微信提供的 cover-view 控件：

• 使用cover-view
• 利用 canvas 繪制（當 cover-view 無法實現時）

代碼：

 <cover-view class='cover-tip-wrapper' wx:if='{{showTopTip}}' bindtap='showNewMarkerClick'>
            <cover-image class='tip-bg' src='../../img/tip-bg.png'>
            </cover-image>
            <cover-view class='cover-tip-content'>
              <cover-image class='trumpet-icon' src='../../img/notification.png'>
              </cover-image>
              <cover-view class='tip-text'>{{warningText}}</cover-view>
              <cover-image class='right-arrow' src='../../img/right-arrow.png'></cover-image>
            </cover-view>
</cover-view>

2、怎么定位到某個坐標，並且讓這個經緯度地址處於地圖中心？

map 的兩個屬性 longitude 和 latitude 表示當前地圖的中心經緯度，和當前用戶定位的經緯度是兩個概念，並無直接關系，如果我們一直改變此 longitude 和 latitude，地圖的中心是會一直變化的，所以只要利用好了這兩個屬性變量，實現上面的功能是很簡單的

that.setData({
  latitude: res.latitude,
  longitude: res.longitude,
})

3、怎么實現拖動地圖，讓定位圖標一直在地圖中心，並實時獲取中心經緯度？

//創建中心指針圖標
that.setData({
      controls: [{
        id: 1,
        iconPath: '../../img/center-location.png',
        position: {
          left: (windowWidth - controlsWidth) / 2,
          top: (windowHeight - bottomHeight) / 2 - controlsHeight * 3 / 4,
          width: controlsWidth,
          height: controlsHeight
        },
        clickable: true
      }]
    })

/** * 拖動地圖回調 */
  regionChange: function (res) {
    var that = this;
    // 改變中心點位置  
    if (res.type == "end") {
      that.getCenterLocation();
    }
  },

/** * 得到中心點坐標 */
  getCenterLocation: function () {
    var that = this;
    //mapId 就是你在 map 標簽中定義的 id
    var mapCtx = wx.createMapContext(mapId);
    mapCtx.getCenterLocation({
      success: function (res) {
        console.log('getCenterLocation----------------------->');
        console.log(res);
        that.updateCenterLocation(res.latitude, res.longitude);
        that.regeocodingAddress();
        that.queryMarkerInfo();
      }
    })

4、如何准確回到當前定位點

//請求當前定位
wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        })
        that.moveTolocation();
      },
 })
 /** * 移動到中心點 */
  moveTolocation: function () {
//mapId 就是你在 map 標簽中定義的 id
var mapCtx = wx.createMapContext(mapId);
mapCtx.moveToLocation();
},

5、如何創建 marker 點
markers 是包含一個至多個 marker 點的數組，一個 marker 標記點至少需要包含圖標 iconPath，出現的經度坐標點 longitude，出現的緯度坐標點 latitude，你可以自定義 marker 點的寬高（單位為 px），如果你有點擊 marker 進行邏輯操作的要求，那就一定要為每一個 marker 標記點設置一個唯一的 id，用於在點擊觸發時判斷點擊的是哪一個 marker 點。

   //marker 點的格式是這樣的，需要一個
    markers: [{
          iconPath: "/resources/others.png",
          id: 0,
          latitude: 23.099994,
          longitude: 113.324520,
          width: 50,
          height: 50
    }],

//但是更多時候是請求服務器返回 marker 點集合，類似膜拜和 ofo，拖動地圖，改變中心點就會刷新改變周圍的 marker 點，這些點可能是客戶端上傳的，也有可能是膜拜這種車載GPS模塊發送給服務器記錄的。

//大致類似於以下這樣，但是代碼僅供參考
// 創建marker
  createMarker: function (dataList) {
    var that = this;
    var currentMarker = [];
    var markerList = dataList.data;
    for (var key in markerList) {
      var marker = markerList[key];
      marker.id = marker.info_id;
      marker.latitude = marker.lat;
      marker.longitude = marker.lng;
      marker.width = 40;
      marker.height = 40;
      if (marker.image) {
        marker.iconPath = '../../img/dog-select.png';
      } else {
        marker.iconPath = '../../img/dog-yellow.png';
      }
    }
    currentMarker = currentMarker.concat(markerList);
    consoleUtil.log('-----------------------');
    consoleUtil.log(currentMarker);
    that.setData({
      markers: currentMarker
    })
  },

后續會更新動態標注的demo代碼。