当前位置: 首页 > 编程笔记 >

微信小程序 wxapp地图 map详解

于鸿博
2023-03-14
本文向大家介绍微信小程序 wxapp地图 map详解,包括了微信小程序 wxapp地图 map详解的使用技巧和注意事项,需要的朋友参考一下

微信小程序 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
  }]
 }
})

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

 类似资料:
  • 本文向大家介绍微信小程序 wxapp导航 navigator详解,包括了微信小程序 wxapp导航 navigator详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名 类型 默

  • 本文向大家介绍微信小程序 wxapp内容组件 progress详细介绍,包括了微信小程序 wxapp内容组件 progress详细介绍的使用技巧和注意事项,需要的朋友参考一下  微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件 进度条:progress 进度条 属

  • 本文向大家介绍微信小程序 wxapp内容组件 text详细介绍,包括了微信小程序 wxapp内容组件 text详细介绍的使用技巧和注意事项,需要的朋友参考一下 微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件:text 文本节点,支持转义符"\"。 除了文本节点以

  • 本文向大家介绍微信小程序 wxapp内容组件 icon详细介绍,包括了微信小程序 wxapp内容组件 icon详细介绍的使用技巧和注意事项,需要的朋友参考一下 微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress icon 图标。 属性名 类型 默认值 说明 type String  

  • 本文向大家介绍微信小程序轮播图swiper代码详解,包括了微信小程序轮播图swiper代码详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序自定义swiper 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 先在index.wxml中写 style=“background:{ {item}}” 报错不要管,不影响页面布局 再在index.js中写 最后在ind

  • 本文向大家介绍微信小程序 Page()函数详解,包括了微信小程序 Page()函数详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序——Page():          在开发微信小程序的时候遇到函数,或者不明白的地方,最好上官网查询,相应的知识,这里小编帮大家整理了下page()函数的用法。 Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函