微信小程序 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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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一行代码获取文件后缀名实例分析
2014/11/12 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
深入理解vue中的$set
2017/06/01 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python一些性能分析的技巧
2020/08/30 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Python学习之time模块的基本使用
2021/01/17 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
上学迟到的检讨书
2014/01/11 职场文书
领班岗位职责范文
2014/02/06 职场文书
争论的故事教学反思
2014/02/06 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
在Python 中将类对象序列化为JSON
2022/04/06 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技