【小程序】微信小程序之地圖功能

轉載請注明出處：http://blog.csdn.net/crazy1235/article/details/55004841

基本使用

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

.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>

<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,
 callout:{

content:'氣泡名稱',

color: '#FF0000',

fontSize: 15,

borderRadius: 10,

display: 'ALWAYS',

 } 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