微信小程序：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的相对坐标。

微信小程序：map组件的简单使用，标注callout与label简单用法相关推荐

微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
微信小程序--map组件视图无法更新的问题
在使用微信小程序 map组件的时候,会有一个小问题.当出现markers是一个数组,在切换数据的时候,页面会残留上次留下来的markers. 在js中使用setData更新markers数据后,地图上 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序map组件查找周围各种场所(通过腾讯位置服务)
废话不多说,直接写咋实现主要用到了腾讯位置服务里面的微信小程序JavaScript SDK,你得先申请一个开发者密钥,这里就不多说了实现效果如下,这里面是搜索周围的餐厅首先wxml代码 < ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
微信小程序map组件点聚合初次使用的坑
有个项目一直有个功能,地图上标注车站,但是点过多时需要点聚合功能,map组件和腾讯地图小程序端并不能实现这个功能,除了webview,好像没有别的办法.终于9月份官方更新了聚合功能,,, 看文档使用方 ...
微信小程序map组件点击不同的marker跳转到不同的页面
"wxml页面" 在map组件中添加触发事件:bindmarkertap="markertap" "js页面" 在data中,为marker ...
微信小程序map组件callout与label简单用法
callout和label的效果图 callout初始位置在标记上方 label初始位置在标记右下方 data:{marker:[{//气泡labellabel:{content: '预约', //文 ...
微信小程序map组件展示当前位置修改标记点图标
当前位置展示: <view><map id="myMap" show-location class="container" style=&qu ...

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

效果图

wxml

js

微信小程序：map组件的简单使用，标注callout与label简单用法相关推荐

最新文章

热门文章