微信小程序自带地图_【小程序】微信小程序之地图功能
基本使用
地圖組件使用起來也很簡單。
.wxml
參數(shù)列表及說明如下：
除了顯示基本地圖，還可以在地圖上添加markers–標(biāo)注，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控件引入即可：
效果如下：
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
}],
... //省略代碼
}
1
circles
data: {
//
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
}],
... //省略代碼
}
1
效果如下：
controls
controls: [{
id: 1,
iconPath: '../../img/marker_yellow.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
1
control點(diǎn)擊事件如下：
controltap: function (e) {
console.log(e.controlId);
},
其實(shí)可以通過在map上添加一個(gè)按鈕，來實(shí)現(xiàn)諸如：定位、狀態(tài)返回等操作。
(直接通過布局文件在map上添加view是顯示不出來的)
綁定事件
BUG
關(guān)于經(jīng)緯度，官方文檔上都寫的是Number類型。但是通過IDE調(diào)試的時(shí)候，寫成字符串也是可以的。但是在IOS真機(jī)上運(yùn)行時(shí)，markers卻顯示不出來，也不報(bào)錯(cuò)。
后來自己對照屬性的類型，發(fā)現(xiàn)后臺傳來的經(jīng)緯度是字符串類型的。而字符串類型的經(jīng)緯度在IOS真機(jī)上經(jīng)測試就是顯示不出來。
所以將字符串轉(zhuǎn)成Number類型即可。
百度地圖API
百度地圖團(tuán)隊(duì)的速度還是不錯(cuò)的！在小程序正式公測的第三天(2017.1.11)就發(fā)布了小程序版百度地圖API
然而一期的功能并不多：
POI檢索服務(wù)
POI檢索熱刺聯(lián)想服務(wù)
逆地址解析服務(wù)
天氣查詢
關(guān)于這四個(gè)功能，大家自行去調(diào)用API就是了！
我要吐槽的是，為什么只有逆地址解析服務(wù)，沒有地址編碼服務(wù)呢？！
好吧，你不提供，我加上好吧！！
其實(shí)上面看到的四個(gè)API也是從他們原有的web服務(wù)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 包含兩個(gè)對象，
// originalData為百度接口返回的原始數(shù)據(jù)
// wxMarkerData為小程序規(guī)范的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: '北京大學(xué)',
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
})
},
然后我還對靜態(tài)圖這個(gè)API進(jìn)行了小程序化！！！
/**
* 靜態(tài)圖
*
* @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"] || '北京', // 地址或者經(jīng)緯度
scale: param["scale"] || 1, // 是否為高清圖 返回圖片大小會(huì)根據(jù)此標(biāo)志調(diào)整。取值范圍為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, // 標(biāo)注，可通過經(jīng)緯度或地址/地名描述；多個(gè)標(biāo)注之間用豎線分隔
};
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"];
}
關(guān)于靜態(tài)圖，在web端調(diào)用的時(shí)候需要單獨(dú)申請key，所以這里要在傳入一個(gè)key！
在BMapWX構(gòu)造函數(shù)中，傳入ak2作為靜態(tài)圖的key
constructor(param) {
this.ak = param["ak"];
this.ak2 = param["ak2"];
}
var Bmap = new bmap.BMapWX({
ak: 'xxxxxxxxxxx',
ak2: 'xxxxxxxxxxx'
});
使用方法也很簡單：
//獲取靜態(tài)圖
getStaticImage: function () {
var url = Bmap.getStaticImage({
scale: 2
});
console.log(url);
that.setData({
staticImageUrl: url
})
}
高德地圖API
相比百度地圖團(tuán)隊(duì)，高德地圖團(tuán)隊(duì)更及時(shí)！ 小程序公測第二天就發(fā)布了?小程序高德地圖API
目前提供的功能有：
獲取POI數(shù)據(jù)
獲取地址描述數(shù)據(jù)
獲取實(shí)時(shí)天氣數(shù)據(jù)
獲取輸入提示詞
路徑規(guī)劃
繪制靜態(tài)圖
在官網(wǎng)上，直接提供了路徑規(guī)劃的功能代碼，和布局代碼(.wxml & .wxss)
可見，高德還是比較靠譜的！
騰訊地圖API
地點(diǎn)搜索
關(guān)鍵詞輸入提示
逆地址解析
地址解析
距離計(jì)算
獲取城市列表
獲取城市區(qū)縣
注意
使用需要注意以下幾點(diǎn)：
map 組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。
請勿在 scroll-view 中使用 map 組件。
css 動(dòng)畫對 map 組件無效。
百度地圖小程序SDK擴(kuò)展下載地址：
總結(jié)
以上是生活随笔為你收集整理的微信小程序自带地图_【小程序】微信小程序之地图功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue取通过key取value_vue怎
- 下一篇： python hashlib模块_pyt