效果图
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的相对坐标。