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

高洛峰
Libérer: 2018-05-24 09:24:07
original
5356 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 !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal