最近閑著踩踩地圖的坑撰筷，一腳下去差點(diǎn)沒(méi)從坑里爬起來(lái)，然后由于某個(gè)原因畦徘，去研究了微信小程序里面地圖callout 這個(gè)屬性
callout呢闭专，是在標(biāo)記的點(diǎn)上面顯示 一個(gè) 氣泡，作為提示用
最后展示下 效果 可以展示 頂部氣泡以及監(jiān)聽(tīng)被點(diǎn)擊旧烧。
廢話不多說(shuō)，直接上代碼
wxml
<map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap"
latitude="{{latitude}}" bindcallouttap = "bindcallouttap"
longitude ="{{longitude}}"
controls="{{controls}}" show-location bindregionchange="regionchange" style="width: 100%; height: {{view.Height}}px;"></map>
js
var app = getApp();
Page({
data: {
url: '',[color=#0800][backcolor=rgb(255, 255, 254)][font=Consolas]//測(cè)試的時(shí)候把下面listData換成身邊的點(diǎn)就行[/font][/backcolor][/color]
listData: [{
"id": 1,
"placeName": "測(cè)試地址1",
"placeImageUrl": "",
"placeOpenTime": 1506200400,
"placeCloseTime": 1506265200,
"placeAddress": "測(cè)試地址1啊",
"placeLongitude": "114.08190678985596",
"placeLatitude": "22.544808209639864"
}, {
"id": 2,
"placeName": "測(cè)試地址2",
"placeImageUrl": "",
"placeOpenTime": 1506200400,
"placeCloseTime": 1506265200,
"placeAddress": "測(cè)試地址2啊",
"placeLongitude": "114.0938372555542",
"placeLatitude": "22.53953655390022"
}, {
"id": 3,
"placeName": "測(cè)試地址3",
"placeImageUrl": "",
"placeOpenTime": 1506243600,
"placeCloseTime": 1506265200,
"placeAddress": "測(cè)試地址3啊",
"placeLongitude": "114.05454",
"placeLatitude": "22.52291"
}],
scale: '15',
Height: '0',
controls: '40',
latitude: '',
longitude: '',
markers: [],
},
onReady: function(e) {
// 使用 wx.createMapContext 獲取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
},
onLoad: function() {
var that = this;
that.setData({
url: app.globalData.url
})
// var data = JSON.stringify({
// page: 1,
// pageSize: 10,
// request: {
// placeLongitude: app.globalData.longitude,
// placeLatitude: app.globalData.latitude,
// userId: app.globalData.userId
// }
// })
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的經(jīng)緯度
success: (res) => {
console.log(res);
that.setData({
markers: that.getSchoolMarkers(),
scale: 12,
longitude: res.longitude,
latitude: res.latitude
})
}
});
wx.getSystemInfo({
success: function(res) {
//設(shè)置map高度画髓，根據(jù)當(dāng)前設(shè)備寬高滿屏顯示
that.setData({
view: {
Height: res.windowHeight
}
})
}
})
},
bindcallouttap: function(e) {
console.log("頭上文字被點(diǎn)擊", e)
},
markertap: function(e) {
console.log("定位的點(diǎn)被點(diǎn)擊", e)
},
controltap: function(e) {
console.log("111")
this.moveToLocation()
},
getSchoolMarkers() {
var market = [];
for (let item of this.data.listData) {
let marker1 = this.createMarker(item);
market.push(marker1)
}
console.log("market===========", market)
return market;
},
moveToLocation: function() {
this.mapCtx.moveToLocation()
},
strSub: function(a) {
var str = a.split(".")[1];
str = str.substring(0, str.length - 1)
return a.split(".")[0] + '.' + str;
},
createMarker(point) {
let latitude = this.strSub(point.placeLatitude);
let longitude = point.placeLongitude;
let marker = {
iconPath: "../images/here.png",
id: point.id || 0,
name: point.placeName || '',
title: point.placeName || '',
latitude: latitude,
longitude: longitude,
label: {
x: -24,
y: -26,
content: point.placeName
},
width: 50,
height: 50,
callout: {
content: point.placeName || '',
fontSize: 14,
bgColor: "#FFF",
borderWidth: 1,
borderColor: "#CCC",
padding: 4,
display: "ALWAYS",
textAlign: "center"
}
};
return marker;
}
})
wxss
.map_container{
height: 300px;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}
tip：
1掘剪、如有遇到新問(wèn)題，可以在下方留言（回的比較慢）或者加QQ群437729329 進(jìn)行咨詢
專欄作家
ETL奈虾。小程序社區(qū)博主夺谁，堅(jiān)持原創(chuàng)分享技術(shù)博文。
本文原創(chuàng)發(fā)布于小程序社區(qū)肉微。未經(jīng)許可匾鸥，禁止轉(zhuǎn)載
原文地址：微信小程序之callout自定義氣泡-小程序社區(qū)/博主專區(qū)-微信小程序開(kāi)發(fā)社區(qū)-微信小程序聯(lián)盟
相關(guān)文章：
