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

terry 2年前 (2023-09-23) 阅读数 142 #移动小程序

微信小程序开发：地图详情及简单示例经度纬度数字中纬度比例尺数字1比例尺水平标记矩阵标记点叠加数组叠加

标记点

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

属性

描述

类型

必填

备注

纬度

数字

为

浮点数，范围为 -90 至 90 经度

经度

Number

为

浮点数，范围 -180 ~ 180

name

标记点名称

String

yes

desc 标记点详细说明

String

覆盖

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

属性	描述	类型	必填	注释
纬度	数字	为	浮点数，范围为 -90 ~ 90
经度	经度	数字	为	浮点数，范围为-180~ 180
iconPath	显示的图标	String	为图像在项目目录	中的路径，支持将相对路径
rotation	写为旋转	数量		顺时针指针旋转角度，范围 0 ~ 360，默认为 0

所需地图组件的经纬度。如果经度和纬度不填，则默认为北京的经度和纬度。

标签只能在初始化时设置，不支持动态更新。

示例：

<!-- 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
  }]
 }
})

错误和提示

提示：不要在滚动视图中使用地图组件