Explication détaillée des exemples de cartes de mini-programmes WeChat-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2017-02-15 12:46:00

original

3731 Les gens l'ont consulté

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）实例详解

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !