微信小程序 地图map详解及简单实例

发布时间 - 2026-01-10 22:25:23    点击率:

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

Bug & Tip

tip: 请勿在 scroll-view 中使用 map 组件

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


# 微信小程序  # map  # 地图实例详解  # 地图教程  # 微信小程序 地图定位简单实例  # 微信小程序 地图(map)实例详解  # 微信小程序中进行地图导航功能的实现方法  # 微信小程序 使用腾讯地图SDK详解及实现步骤  # 微信小程序 高德地图SDK详解及简单实例(源码下载)  # 微信小程序开发之map地图实现教程  # 微信小程序之获取当前位置经纬度以及地图显示详解  # 微信小程序教程之本地图片上传(leancloud)实例详解  # 微信小程序地图(map)组件点击(tap)获取经纬度的方法  # 微信小程序map地图使用方法详解  # 自定义  # 必填  # 浮点数  # 在地  # 图上  # 默认值  # 我现在  # 希望能  # 不支持  # 谢谢大家  # 北京  # 默认为  # 顺时针  # 目录下  # 只能在  # markers  # scale  # latitude  # longitude  # Number 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么在Blade中安全地输出原始HTML内容  Laravel如何使用软删除(Soft Deletes)功能_Eloquent软删除与数据恢复方法  JavaScript中的标签模板是什么_它如何扩展字符串功能  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  Android实现代码画虚线边框背景效果  Linux后台任务运行方法_nohup与&使用技巧【技巧】  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网?  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何批量查询域名的建站时间记录?  Android okhttputils现在进度显示实例代码  Thinkphp 中 distinct 的用法解析  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  Laravel distinct去重查询_Laravel Eloquent去重方法  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  Python文件异常处理策略_健壮性说明【指导】  三星、SK海力士获美批准:可向中国出口芯片制造设备  javascript中的try catch异常捕获机制用法分析  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做?  微信小程序 canvas开发实例及注意事项  网站制作公司哪里好做,成都网站制作公司哪家做得比较好,更正规?  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  如何在阿里云购买域名并搭建网站?  WordPress 子目录安装中正确处理脚本路径的完整指南  如何用搬瓦工VPS快速搭建个人网站?  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  PHP正则匹配日期和时间(时间戳转换)的实例代码  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Python文件操作最佳实践_稳定性说明【指导】  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  教你用AI将一段旋律扩展成一首完整的曲子  利用vue写todolist单页应用  Laravel如何使用Vite进行前端资源打包?(配置示例)  用yum安装MySQLdb模块的步骤方法  Laravel如何实现文件上传和存储?(本地与S3配置)  Laravel如何实现一对一模型关联?(Eloquent示例)  网站制作壁纸教程视频,电脑壁纸网站?  linux写shell需要注意的问题(必看)  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  Laravel如何实现模型的全局作用域?(Global Scope示例)  如何快速搭建二级域名独立网站?  Laravel如何集成Inertia.js与Vue/React?(安装配置)  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  详解CentOS6.5 安装 MySQL5.1.71的方法  java ZXing生成二维码及条码实例分享