基本使用

地圖組件使用起來也很簡單。

.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="width: 100%; height: 350px;">
</map>

參數列表及說明如下：

除了顯示基本地圖，還可以在地圖上添加markers–標注，polyline–折線，circles–圓形，controls–控件。

markers

data: {
    //
    markers: [{
      iconPath: "../../img/marker_red.png",
      id: 0,
      latitude: 40.002607,
      longitude: 116.487847,
      width: 35,
      height: 45
    }],
    ... //省略代碼
    }

在data中定義markers變量來表示覆蓋物

然后map控件引入即可：

<map id="map" longitude="{{longitude}}"  markers="{{markers}}" style="width: 100%; height: 350px;" ...//省略代碼>
</map> 

效果如下：

---

polyline

data: {
    //
    polyline: [{
      points: [{
        longitude: '116.481451',
        latitude: '40.006822'
      }, {
        longitude: '116.487847',
        latitude: '40.002607'
      }, {
        longitude: '116.496507',
        latitude: '40.006103'
      }],
      color: "#FF0000DD",
      width: 3,
      dottedLine: true
    }],
    ... //省略代碼
    }

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" style="width: 100%; height: 350px;">

---

circles

data: {
    //
    circles: [{
      latitude: '40.007153',
      longitude: '116.491081',
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
    ... //省略代碼
    }

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" style="width: 100%; height: 350px;">

效果如下：

---

controls

controls: [{
      id: 1,
      iconPath: '../../img/marker_yellow.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]

<map id="map" controls="{{controls}}" bindcontroltap="controltap" style="width: 100%; height: 350px;">

control點擊事件如下：

controltap: function (e) {
    console.log(e.controlId);
  },

其實可以通過在map上添加一個按鈕，來實現諸如：定位、狀態返回等操作。 
（直接通過布局文件在map上添加view是顯示不出來的）

綁定事件

---

BUG

關于經緯度，官方文檔上都寫的是Number類型。但是通過IDE調試的時候，寫成字符串也是可以的。但是在IOS真機上運行時，markers卻顯示不出來，也不報錯。

后來自己對照屬性的類型，發現后臺傳來的經緯度是字符串類型的。而字符串類型的經緯度在IOS真機上經測試就是顯示不出來。

所以將字符串轉成Number類型即可。

---

---

百度地圖API

百度地圖團隊的速度還是不錯的！在小程序正式公測的第三天（2017.1.11）就發布了小程序版百度地圖API

百度地圖微信小程序JavaScript API

然而一期的功能并不多：

• POI檢索服務

• POI檢索熱刺聯想服務

• 逆地址解析服務

• 天氣查詢

關于這四個功能，大家自行去調用API就是了！

我要吐槽的是，為什么只有逆地址解析服務，沒有地址編碼服務呢？！

好吧，你不提供，我加上好吧！！

把參考 web服務API里關于地址編碼的API ，在小程序里面封裝一下即可！

其實上面看到的四個API也是從他們原有的web服務API中抽出來的 ！

核心代碼如下：

let startGeocoding = function (e) {
            wx.request({
                url: 'https://api.map.baidu.com/geocoder/v2/',
                data: geocodingparam,
                header: {
                    "content-type": "application/json"
                },
                method: 'GET',
                success(data) {
                    let res = data["data"];
                    if (res["status"] === 0) {
                        let result = res["result"];
                        // outputRes 包含兩個對象，
                        // originalData為百度接口返回的原始數據
                        // wxMarkerData為小程序規范的marker格式
                        let outputRes = {};
                        outputRes["originalData"] = res;
                        outputRes["wxMarkerData"] = [];
                        outputRes["wxMarkerData"][0] = {
                            id: 0,
                            latitude: result["location"]['lat'],
                            longitude: result["location"]['lng'],
                            address: geocodingparam["address"],
                            iconPath: otherparam["iconPath"],
                            iconTapPath: otherparam["iconTapPath"],
                            desc: '',
                            business: '',
                            alpha: otherparam["alpha"],
                            width: otherparam["width"],
                            height: otherparam["height"]
                        }
                        otherparam.success(outputRes);
                    } else {
                        otherparam.fail({
                            errMsg: res["message"],
                            statusCode: res["status"]
                        });
                    }
                },
                fail(data) {
                    otherparam.fail(data);
                }
            });
        };

使用方法：

// 地理編碼

  startGeocoding: function () {
    Bmap.geocoding({
      fail: fail,
      success: success,
      address: '北京大學',
      iconPath: '../../img/marker_red.png',
      iconTapPath: '../../img/marker_red.png'
    })
  },

---

然后我還對 靜態圖 這個API進行了小程序化?。?！

/**
     * 靜態圖
     * 
     * @author ys
     *
     * @param {Object} param 檢索配置
     * http://lbsyun.baidu.com/index.php?title=static
     */
    getStaticImage(param) {
        var that = this;
        param = param || {};
        let staticimageparam = {
            ak: that.ak2,
            width: param["width"] || 400,
            height: param["height"] || 300,
            center: param["center"] || '北京', // 地址或者經緯度
            scale: param["scale"] || 1, // 是否為高清圖 返回圖片大小會根據此標志調整。取值范圍為1或2。 1表示返回的圖片大小為size= width *height; 2表示返回圖片為(width*2)*(height *2)，且zoom加1  注：如果zoom為最大級別，則返回圖片為（width*2）*（height*2），zoom不變。
            zoom: param["zoom"] || 11, //高清圖范圍[3, 18]；0低清圖范圍[3,19]
            copyright: param["copyright"] || 1, // 0表示log+文字描述樣式，1表示純文字描述樣式
            markers: param["markers"] || null, // 標注，可通過經緯度或地址/地名描述；多個標注之間用豎線分隔
        };
        return "http://api.map.baidu.com/staticimage/v2?" + "ak=" + staticimageparam["ak"] + "&width=" + staticimageparam["width"] + "&height=" + staticimageparam["height"] + "&center=" + staticimageparam["center"] + "&zoom=" + staticimageparam["zoom"] + "&scale=" + staticimageparam["scale"] + "&copyright=" + staticimageparam["copyright"];
    }

關于靜態圖，在web端調用的時候需要單獨申請key，所以這里要在傳入一個key！

在BMapWX構造函數中，傳入ak2作為靜態圖的key

constructor(param) {
        this.ak = param["ak"];
        this.ak2 = param["ak2"];
    }

var Bmap = new bmap.BMapWX({
  ak: 'xxxxxxxxxxx',
  ak2: 'xxxxxxxxxxx'
});

使用方法也很簡單：

//獲取靜態圖
  getStaticImage: function () {
    var url = Bmap.getStaticImage({
      scale: 2
    });
    console.log(url);
    that.setData({
      staticImageUrl: url
    })
  }

---

高德地圖API

相比百度地圖團隊，高德地圖團隊更及時！ 小程序公測第二天就發布了 小程序高德地圖API

微信小程序SDK > 概述

目前提供的功能有：

• 獲取POI數據

• 獲取地址描述數據

• 獲取實時天氣數據

• 獲取輸入提示詞

• 路徑規劃

• 繪制靜態圖

在官網上，直接提供了路徑規劃的功能代碼，和布局代碼(.wxml & .wxss)

可見，高德還是比較靠譜的！

---

騰訊地圖API

微信小程序JavaScript SDK

• 地點搜索

• 關鍵詞輸入提示

• 逆地址解析

• 地址解析

• 距離計算

• 獲取城市列表

• 獲取城市區縣

---

注意

使用

• map 組件是由客戶端創建的原生組件，它的層級是最高的。

• 請勿在 scroll-view 中使用 map 組件。

• css 動畫對 map 組件無效。

---

百度地圖小程序SDK擴展下載地址：

https://github.com/crazy1235/WXlittleApplication