加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

微信小程序之callout自定义气泡

发布时间:2020-12-14 19:34:13 所属栏目:资源 来源:网络整理
导读:最近闲着踩踩地图的坑 一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了 微信小程序里面地图? callout 这个属性 callout呢,是在标记的点上面显示 一个 气泡,作为提示用 最后展示下 效果??可以展示 顶部气泡以及监听被点击 ? 废话不多说,直接上代
最近闲着踩踩地图的坑

一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了 微信小程序里面地图?callout 这个属性
callout呢,是在标记的点上面显示 一个 气泡,作为提示用
最后展示下 效果??可以展示 顶部气泡以及监听被点击

?

废话不多说,直接上代码


wxml
[AppleScript]?纯文本查看?复制代码
?
1
2
3
4
<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
[AppleScript]?纯文本查看?复制代码
var app = getApp();
?
Page{
??data: {
????url: '',[color=#0800][backcolor=rgb(255,254)][font=Consolas]//测试的时候把下面listData换成身边的点就行[/font][/backcolor][/color]
????listData[{
??????"id"1"placeName": "测试地址1""placeImageUrl""""placeOpenTime"1506200400"placeCloseTime"1506265200"placeAddress""测试地址1啊""placeLongitude""114.08190678985596""placeLatitude""22.544808209639864"
????}{
2"测试地址2"
"测试地址2啊""114.0938372555542""22.53953655390022"
{
3"测试地址3"
1506243600
"测试地址3啊""114.05454""22.52291"
}]scale'15Height0controls40latitudelongitudemarkers[]????onReadyfunction(e) {
????// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx wx.createMapContext'myMap')
onLoad{
var that this;
????that.setData{
??????app.globalData.url
)
?
var data JSON.stringify{
/?? pagepageSize10request{
/???? placeLongitudeapp.globalData.longitudeplaceLatitudeapp.globalData.latitudeuserIdapp.globalData.userId
/?? }
/ )
?
wx.getLocation{
??????type'gcj02返回可以用于wx.openLocation的经纬度
successres) => {
????????console.log;
????????{
??????????: .getSchoolMarkers)12res.longituderes.latitude
????????)
??????}
;
?
wx.getSystemInfo{
{
????????设置map高度,根据当前设备宽高满屏显示
{
??????????view{
????????????res.windowHeight
??????????}
)
}
)
bindcallouttap{
("头上文字被点击")
markertap{
"定位的点被点击")
controltap{
"111")
this.moveToLocation)
getSchoolMarkers{
?
var market [];
?
for let item of this.data.listData{
?
let marker1 this.createMarker(item;
?
market.pushmarker)
}
"market==========="market)
return market;
moveToLocation{
this.mapCtx.moveToLocation)
strSuba{
var str a.split"."1];
str str.substring0str.length - )
] + '.' str;
createMarkerpoint{
?
let latitude this.strSubpoint.placeLatitude;
let longitude point.placeLongitude;
let marker = {
iconPath"../images/here.png"idpoint.id || namepoint.placeName || ''title
label{
x-24y-26????????contentpoint.placeName
width50heightcallout{
fontSize14bgColor"#FFF"borderWidthborderColor"#CCC"padding4display"ALWAYS"textAlign"center"
}
;
marker;
}
)


wxss
[AppleScript]?纯文本查看?复制代码
.map_container{
300px;
100%;
}
??
.map %;
%;
}



tip:

1、如有遇到新问题,可以在下方留言(回的比较慢)或者加QQ群437729329 进行咨询



map.rar

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

相关内容
推荐文章
站长推荐
热点阅读