微信小程序的map怎么用
发表于:2024-09-28 作者:千家信息网编辑
千家信息网最后更新 2024年09月28日,今天小编给大家分享一下微信小程序的map怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解
千家信息网最后更新 2024年09月28日微信小程序的map怎么用
今天小编给大家分享一下微信小程序的map怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
微信小程序map
地图。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
longitude | Number | 中心经度 | ||
latitude | Number | 中心纬度 | ||
scale | Number | 16 | 缩放级别,取值范围为5-18 | |
markers | Array | 标记点 | ||
covers | Array | 即将移除,请使用 markers | ||
polyline | Array | 路线 | ||
circles | Array | 圆 | ||
controls | Array | 控件 | ||
include-points | Array | 缩放视野以包含所有给定的坐标点 | ||
show-location | Boolean | 显示带有方向的当前定位点 | ||
bindmarkertap | EventHandle | 点击标记点时触发 | ||
bindcallouttap | EventHandle | 点击标记点对应的气泡时触发 | 1.2.0 | |
bindcontroltap | EventHandle | 点击控件时触发 | ||
bindregionchange | EventHandle | 视野发生变化时触发 | ||
bindtap | EventHandle | 点击地图时触发 |
注意: covers 属性即将移除,请使用 markers 替代
markers
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
id | 标记点id | Number | 否 | marker点击事件回调会返回此id | |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | String | 否 | ||
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 | |
rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
alpha | 标注的透明度 | Number | 否 | 默认1,无透明 | |
width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | |
height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | {content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display} | 1.2.0 |
label | 为标记点旁边增加标签 | Object | 否 | {color, fontSize, content, x, y},可识别换行符,x,y原点是marker对应的经纬度 | 1.2.0 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | 1.2.0 |
marker 上的气泡 callout
属性 | 说明 | 类型 |
---|---|---|
content | 文本 | String |
color | 文本颜色 | String |
fontSize | 文字大小 | Number |
borderRadius | callout边框圆角 | Number |
bgColor | 背景色 | String |
padding | 文本边缘留白 | Number |
display | 'BYCLICK':点击显示; 'ALWAYS':常显 | String |
polyline
指定一系列坐标点,从数组第一项连线至最后一项
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
points | 经纬度数组 | Array | 是 | [{latitude: 0, longitude: 0}] | |
color | 线的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA | |
width | 线的宽度 | Number | 否 | ||
dottedLine | 是否虚线 | Boolean | 否 | 默认false | |
arrowLine | 带箭头的线 | Boolean | 否 | 默认false,开发者工具暂不支持该属性 | 1.2.0 |
borderColor | 线的边框颜色 | String | 否 | 1.2.0 | |
borderWidth | 线的厚度 | Number | 否 | 1.2.0 |
circles
在地图上显示圆
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 |
color | 描边的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
fillColor | 填充颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
radius | 半径 | Number | 是 | |
strokeWidth | 描边的宽度 | Number | 否 |
controls
在地图上显示控件,控件不随着地图移动
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件id | Number | 否 | 在控件点击事件回调会返回此id |
position | 控件在地图的位置 | Object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 |
clickable | 是否可点击 | Boolean | 否 | 默认不可点击 |
position
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
left | 距离地图的左边界多远 | Number | 否 | 默认为0 |
top | 距离地图的上边界多远 | Number | 否 | 默认为0 |
width | 控件宽度 | Number | 否 | 默认为图片宽度 |
height | 控件高度 | Number | 否 | 默认为图片高度 |
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
示例:
// map.jsPage({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50}], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true}], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true}] }, regionchange(e) {console.log(e.type) }, markertap(e) {console.log(e.markerId) }, controltap(e) {console.log(e.controlId) }})
Bug & Tip
tip
:map
组件是由客户端创建的原生组件,它的层级是最高的。tip
: 请勿在scroll-view
中使用map
组件。tip
:css
动画对map
组件无效。tip
:map
组件使用的经纬度是火星坐标系,调用wx.getLocation
接口需要指定type
为gcj02
以上就是"微信小程序的map怎么用"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。
地图
控件
属性
标记
类型
经纬
经纬度
图片
宽度
组件
范围
路径
程序
图标
备注
颜色
支持
点数
知识
篇文章
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
自学网络安全攻防
数据库原理与技术教程答案
斯汀网络技术
修改数据库为只读
分布式数据库的数据结构
数据库质疑数据源
每日英语听力fm 代理服务器
电子软件开发学校排名
金山区游戏软件开发服务
卫生院网络安全应急措施
web和网络安全有什么区别
碧蓝航线数据库
网络安全宣传周做法
萤石网络安全吗
qt插入sqlite数据库
广义网络安全系统
网络安全的辩论文
搭博客要买服务器吗
浅析软件开发中的ssm框架
数据库审计 安全牛
平板连接服务器显示屏
每日英语听力fm 代理服务器
数据库的转移方法包括
《网络数据库》
影之哀伤服务器合区了么
sql数据库基本语句
有什么好的esg数据库
海康威视服务器系统升级
yii数据添加到数据库
玩加电竞王者荣耀数据库