微信小程序 wxapp地图 map详解


Posted in Javascript onOctober 31, 2016

微信小程序 wxapp地图 map:

map

属性名 类型 默认值 说明
longitude Number   中心经度
latitude Number   中心纬度
scale Number 1 缩放级别
markers Array   标记点
covers Array   覆盖物

标记点

标记点用于在地图上显示标记的位置,不能自定义图标和样式

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
name 标注点名 String  
desc 标注点详细描述 String  

覆盖物

覆盖物用于在地图上显示自定义图标,可自定义图标和样式

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

标记点markers只能在初始化的时候设置,不支持动态更新。

示例:

<!-- map.wxml -->
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
// map.js
Page({
 data: {
  markers: [{
   latitude: 23.099994,
   longitude: 113.324520,
   name: 'T.I.T 创意园',
   desc: '我现在的位置'
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: '../images/car.png',
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: '../images/car.png',
   rotate: 90
  }]
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 #Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 #Javascript
详解JavaScript跨域总结与解决办法
Oct 31 #Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 #Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 #Javascript
JavaScript事件用法浅析
Oct 31 #Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 #Javascript
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python中正则的使用指南
2016/12/04 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
python中pickle模块浅析
2020/12/29 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
this关键字的含义
2015/04/08 面试题
linux面试题参考答案(10)
2016/10/26 面试题
应用外语系自荐信
2014/06/26 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年党务工作总结
2014/11/25 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
入党个人总结范文
2015/03/02 职场文书
入党群众意见范文
2015/06/02 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python