WeChat Mini 프로그램 맵 자세한 설명 및 간단한 예

WeChat 미니 프로그램 지도

WeChat 미니 프로그램 지도

지도

属性名	类型	默认值	说明
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

지도 구성 요소의 경도와 위도가 필수입니다. 경도와 위도가 채워지지 않은 경우 기본값은 베이징의 경도와 위도입니다.

마커는 초기화 중에만 설정할 수 있으며 동적 업데이트를 지원하지 않습니다.

예:

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

버그 및 팁

팁: 스크롤 보기에서 지도 구성 요소를 사용하지 마세요

읽어주셔서 감사합니다 , 모든 사람에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

더 많은 WeChat 미니 프로그램 지도와 간단한 예제를 보려면 PHP 중국어 웹사이트를 주목하세요!