>  기사  >  위챗 애플릿  >  WeChat Mini 프로그램 맵 자세한 설명 및 간단한 예

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

高洛峰
高洛峰원래의
2018-05-24 09:24:075349검색

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: &#39;T.I.T 创意园&#39;,
   desc: &#39;我现在的位置&#39;
  }],
  covers: [{
   latitude: 23.099794,
   longitude: 113.324520,
   icaonPath: &#39;../images/car.png&#39;,
   rotate: 10
  }, {
   latitude: 23.099298,
   longitude: 113.324129,
   iconPath: &#39;../images/car.png&#39;,
   rotate: 90
  }]
 }
})

버그 및 팁

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

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

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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.