Maison  >  Article  >  Applet WeChat  >  Explication détaillée des exemples de cartes de mini-programmes WeChat

Explication détaillée des exemples de cartes de mini-programmes WeChat

高洛峰
高洛峰original
2017-02-15 12:46:003674parcourir

Instance WeChat Mini Program Map (MAP)

Ce sont les informations fournies par Xiaobian sur la WeChat Mini Program Map (API MAP).

Le module de positionnement cartographique d'aujourd'hui. Le simulateur ne pourra certainement pas obtenir l'emplacement. Voici les résultats réels des tests de la machine.

Photo ci-dessus :

微信小程序 地图(map)实例详解

微信小程序 地图(map)实例详解

Je ne mentionnerai pas la latitude et la longitude Pour le positionnement, je rentre directement ici le positionnement numérique.

Comme le montre l'image ci-dessous, l'échelle est le taux de zoom. Cet attribut est actuellement invalide. L'équipe WeChat devrait le corriger plus tard. Après tout, la version bêta publique vient de commencer. Cela signifie que peu importe la façon dont je modifie l'échelle. ma carte est toujours au taux de zoom par défaut. Comme indiqué ci-dessus

微信小程序 地图(map)实例详解

La rotation des marqueurs est l'angle de rotation de l'icône si vous en avez besoin. une icône parallèle à l'écran, réglez-la à 0.

De plus, l'icône de la superposition peut être modifiée. Il suffit de définir le chemin sur iconPath.

Code précédent : <.>

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: &#39;浦东新区&#39;, 
   desc: &#39;我的位置&#39; 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: &#39;../images/car.png&#39;, 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

2.wx.getLocation(OBJECT) Obtenir l'emplacement actuel API


微信小程序 地图(map)实例详解La case rouge indique la longitude, la latitude, la vitesse et la précision

Vous pouvez ouvrir directement la carte en utilisant les coordonnées renvoyées par gch02.

Voir la documentation de l'API spécifique


微信小程序 地图(map)实例详解


3.wx.openLocation(OBJECT) Afficher l'emplacement

Le plus simple et le plus grossier Le seul moyen est de localiser directement la longitude et la latitude

Code :

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  wx.getLocation({ 
   type: &#39;gcj02&#39;, 
   success: function (res) { 
    var latitude = res.latitude 
    var longitude = res.longitude 
    var speed = res.speed 
    var accuracy = res.accuracy 
    console.log("latitude:" + latitude) 
    console.log("longitude:" + longitude) 
    console.log("speed:" + speed) 
    console.log("accuracy:" + accuracy) 
    wx.openLocation({ 
     latitude: latitude, 
     longitude: longitude, 
     scale: 28 
    }) 
   } 
  }) 
 } 
})
Rendu de test machine réel :

微信小程序 地图(map)实例详解

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

Pour des explications plus détaillées sur les exemples de cartes d'applets WeChat et les articles connexes, 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