功能點：地圖
本文基於微信小程式公測版，IDE：微信開發者工具 0.11.122100

今天打算繼續寫一下這個系列的文章，因為17年1月9號微信小程式就要正式上線了，為了趕這波熱潮，打算把本系列上篇文章的demo，《附近三公里》當做一個正式版釋出。

然而悲催的事情總是這麼多，開啟工具的時候，發現微信做了幾次升級，而我們之前跑的好好的專案，個別功能居然跑不起來了，沒辦法，繼續採坑吧，這裡先介紹一下這個版本上地圖的變化。

如果看過我這個系列的文章的話，你可能還記著，在寫上篇文章的時候，微信提供了一個js的方法，呼叫一下就直接打開了微信內建的地圖，但是這個版本上，這個功能被改了！被改了！被改了！

這個版本（小程式剛出，有些東西難免會有改動，這裡所講的也只能說基於這個版本，至於下一個版本會不會改，誰都說不好）地圖被抽出成一個元件map。這裡不得不說一句，本版本的map，開放的功能介面還是太少，有很多效果都不能達到。

這裡我修正一下，寫這篇文章的時候，本文說的內容都沒有問題，前文的demo用的是wx.openLoaction方法開啟微信的內建地圖，但是寫本文的時候，這個方法不好用了。當時以為是微信的版本迭代把這個方法幹掉了，但是在昨天我發現這個方法又好用了，現在想想可能是當時這個方法存在bug。

那就在這裡簡單說一下wx.openLoaction。這個方法提供了一系列的引數來開啟微信的內建地圖。

引數如下：

latitude: e.currentTarget.dataset.lat , // 緯度，範圍為-90~90，負數表示南緯
longitude: e.currentTarget.dataset.lng, // 經度，範圍為-180~180，負數表示西經
scale: 14, // 縮放比例
name: e.currentTarget.dataset.name, // 位置名
address: e.currentTarget.dataset.address, // 地址的詳細說明

如上開啟的地圖可以顯示當前定位位置和你傳入的位置，並可以規劃路線（這個目前是在ios中提供，android中並沒有提供）和在第三方地圖中開啟。

元件 map

下面來自官方文件

我們可以通過設定中心經緯度來設定地圖中心點。設定scale 來設定地圖的縮放層級。markers，polyline,circles,都接受一個點的集合，來顯示不同的樣式。controls允許我們以相對佈局的方式設定一系列的控制元件，並通過bindcontroltap屬性繫結事件。

官方文件對各個屬性都有很詳細的介紹，請移步。

下面把我的demo中地圖的page，貼出來給大家當一個例子，好好看看可以避免很多我踩過的坑。

<!-- map.wxml -->
<map 
    id="map" 
    longitude="{{lng}}" 
    latitude="{{lat}}" 
    scale="14" 
    show-location="{{true}}"
    markers="{{markers}}" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    show-location style="width: 100%; position:absolute;top:0;bottom:0;height:auto;">
</map>

// map.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    lng: 0,
    lat: 0
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  onLoad: function (options) {

    this.setData({
      lng: app.globalData.longitude, // 全域性屬性，用來取定位座標
      lat: app.globalData.latitude,
      markers: [{
        iconPath: "/image/03.png",
        id: 0,
        latitude: options.lat, // 頁面初始化 options為頁面跳轉所帶來的引數 
        longitude: options.lng,
        width: 20,
        height: 20
      }],
      polyline: [{
      points: [{
          longitude: app.globalData.longitude,
          latitude: app.globalData.latitude
        }, {
          longitude: options.lng,
          latitude: options.lat
        }],
        color: "#FF0000DD",
        width: 20,
        dottedLine: true
      }]
    })
  }
})

這個頁面本來筆者是打算做一個導航的，前一個頁面傳進來一個座標和自己的定位座標做一個路線的規劃，但是map 並沒有給我們提供這個介面，唯一搭點邊的只有 polyline 屬性，但是，這個屬性連起來的是直線！是直線！是直線！你不能指望著你的客戶，拿著你的小程式，在地圖上按直線給過去吧。

後來，我有研究了一下用js版的百度地圖巢狀，發現然並卵，可能筆者功力不夠，沒找到怎麼把百度的js引到小程式裡面，所以這個功能並不是很好用。