【小程序】微信小程序之地圖功能
轉載請註明出處：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,
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;">- 1
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;">- 1
效果如下：
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;">- 1
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"] + "¢er=" + staticimageparam["center"] + "&zoom=" + staticimageparam["zoom"] + "&scale=" + staticimageparam["scale"] + "©right=" + 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
【小程序】微信小程序之地圖功能