Maison  >  Article  >  Applet WeChat  >  Carte du programme WeChat Mini Explication détaillée et exemples simples

Carte du programme WeChat Mini Explication détaillée et exemples simples

高洛峰
高洛峰original
2018-05-24 09:24:075327parcourir

Carte de la carte du programme WeChat Mini

Carte du programme WeChat Mini

Carte

属性名 类型 默认值 说明
longitude Number   中心经度
latitude Number   中心纬度
scale Number 1 缩放级别
markers Array   标记点
covers Array   覆盖物

Point marqué

Les points marqueurs sont utilisés pour afficher les emplacements marqués sur la carte, les icônes et les styles ne peuvent pas être personnalisés

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
name 标注点名 String  
desc 标注点详细描述 String  

Superpositions

Les superpositions sont utilisées pour placer des marqueurs sur la carte Des icônes personnalisées sont affichées sur la carte, et les icônes et les styles peuvent être personnalisés

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0

La longitude et la latitude du composant cartographique sont requises. Si la longitude et la latitude ne sont pas renseignées, le. la valeur par défaut est la longitude et la latitude de Pékin.

Les marqueurs ne peuvent être définis que lors de l'initialisation et ne prennent pas en charge les mises à jour dynamiques.

Exemple :

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

Bogue et astuce

astuce : N'utilisez pas de composant de carte dans la vue défilante

Merci d'avoir lu, j'espère que cela pourra aider tout le monde, merci pour votre soutien à ce site !

Pour plus de détails sur la carte du mini-programme WeChat et des exemples simples, veuillez faire attention au site Web PHP chinois !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn