1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序:map组件的简单使用 标注callout与label简单用法

微信小程序:map组件的简单使用 标注callout与label简单用法

时间:2019-04-21 06:11:53

相关推荐

微信小程序:map组件的简单使用 标注callout与label简单用法

效果图

wxml

<mapid="myMap"style="width: 100%; height: 300px;"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"show-locationenable-zoom="{{true}}"></map>

很常用的一些参数,没什么太大疑问,不过博主在使用时发现了一点十分有趣的事:enable-zoom属性默认为true,在开发工具中竟然没有作用,无法缩放,问题出在本地设置的调试基础库中,博主选择了当前最新版本2.8.0便一切正常了。

附:经纬度查询

js

Page({/*** 页面的初始数据*/data: {latitude: 34.7681097764,longitude: 113.7693285942,markers: [{id: 1,latitude: 34.7681097764,longitude: 113.7693285942,//气泡label (可与callout 2选1)label:{content: '金水区绿地原盛国际1号楼A座9楼', //文本color: '#FF0202', //文本颜色borderRadius: 3, //边框圆角borderWidth: 1, //边框宽度borderColor: '#FF0202', //边框颜色bgColor: '#ffffff', //背景色padding: 5, //文本边缘留白textAlign: 'center' //文本对齐方式。有效值: left, right, center},//气泡calloutcallout: {content: '金水区绿地原盛国际1号楼A座9楼', //文本color: '#FF0202', //文本颜色borderRadius: 3, //边框圆角borderWidth: 1, //边框宽度borderColor: '#FF0202', //边框颜色bgColor: '#ffffff', //背景色padding: 5, //文本边缘留白textAlign: 'center' //文本对齐方式。有效值: left, right, center}}],},})

callout气泡标注需要点击标注点。

label会直接显示,其有属性anchorX与anchorY为与原点marker的相对坐标。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。