Carte du programme WeChat Mini Explication détaillée et exemples simples-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2018-05-24 09:24:07

original

5395 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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 !