Introduction détaillée aux étapes de mise en œuvre du mini-programme WeChat à l'aide du SDK Tencent Map

Cet article fournit des informations pertinentes sur les étapes détaillées d'utilisation du SDK Map Tencent dans les mini-programmes WeChat. Les amis qui en ont besoin peuvent se référer à l'

Explication détaillée de l'utilisation de Tencent. SDK Maps dans les mini-programmes WeChat. Et étapes de mise en œuvre

Récemment, j'ai utilisé la solution de mini-programme fournie par Tencent Maps dans un projet de service de loterie, et j'aimerais la partager avec vous !

Il est très simple à utiliser, mais certaines fonctions doivent encore être améliorées.

Document officiel : lbs.qq.com/qqmap_wx_jssdk/index.html

Étapes :

1. Postuler Clé de développeur (clé) : demander une clé

2. Télécharger le programme WeChat Mini JavascriptSDK, le programme WeChat Mini JavascriptSDK v1.0

3. Paramètres de nom de domaine sécurisés, vous devez ajouter l'adresse du nom de domaine apis.map.qq.com sur la plateforme publique WeChat
   

4. Exemple de mini programme

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 onLoad: function () {
   // 实例化API核心类
   qqmapsdk = new QQMapWX({
     key: '申请的key'
   });
 },
 onShow: function () {
   // 调用接口
   qqmapsdk.search({
     keyword: '彩票',
     success: function (res) {
       console.log(res);
     },
     fail: function (res) {
       console.log(res);
     },
   complete: function (res) {
     console.log(res);
   }
 });
})

Rendu des résultats :

Aller acheter loterie.png

5 . Cours de base

5.1 Recherche de localisation (options :Objet)

Recherchez des poi environnants à l'aide de mots-clés, tels que "hôtel". " et "restauration" "Divertissement", "École", etc.

Implémentation de l'interface d'achat loterie :

5.1.1 buy.js

// 引入腾讯地图SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var util = require("../../utils/util.js");
var qqmapsdk;
Page({
　data: {
　　resData: []
　},
　onLoad: function (options) {
　　// 实例化腾讯地图API核心类
　　qqmapsdk = new QQMapWX({
　　　key: 'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key
　　});
　},
　onShow: function () {
　　var that = this;
　　// 腾讯地图调用接口
　　qqmapsdk.search({
　　　keyword: '彩票',
　　　page_size: 20,
　　　success: function (res) {
　　　　console.log(res);
　　　　var resData = res.data;
　　　　for (var i = 0; i < resData.length; i++) {
　　　　　resData[i]._distance = util.formatDistance(resData[i]._distance);//转换一下距离的格式
　　　　}
　　　　that.setData({resData: resData});
　　　},
　　　fail: function(res) {
　　　　console.log(res);
　　　},
　　　complete: function(res) {
　　　　console.log(res);
　　　}
　　})
　}
})

// utils/util.js
/**
* 将距离格式化
* <1000m时 取整,没有小数点
* >1000m时 单位取km,一位小数点 
*/
function formatDistance(num) {
　if (num < 1000) {
　　return num.toFixed(0) + &#39;m&#39;;
　} else if (num > 1000) {
　　return (num / 1000).toFixed(1) + &#39;km&#39;;
　}
}

5.1.2 Le style principal de buy.wxml adopte weui

<view class="page">
<view wx:for="{{resData}}" wx:key="shop" class="pagebd">
 <view bindtap="navTo" data-item="{{item}}">
  <view class="weui-panel">
   <view class="weui-panelbd">
    <view class="weui-media-box weui-media-box_text">
     <view class="weui-media-boxtitle weui-media-boxtitle_in-text">{{item.title}}</view>
     <view class="weui-media-boxdesc">{{item.address}}</view>
     <view class="weui-media-boxinfo">
      <view class="weui-media-boxinfometa">电话：{{item.tel}}</view>
      <view class="weui-media-boxinfometa weui-media-boxinfometa_extra">距离：{{item._distance}}</view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
</view>

5.2 Les invites de saisie de mots clés getSuggestion(options:Object)

sont utilisées pour obtenir l'achèvement et les invites des mots-clés saisis, pour aider les utilisateurs à saisir rapidement.

Exemple :

// 调用接口
qqmapsdk.getSuggestion({
 keyword: '技术',
 success: function(res) {
   console.log(res); 
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});

5.3 Calcul de distance calculateDistance(options:Object)

Calculez la distance de marche ou de conduite d'un point à plusieurs points .

Exemple :

// 调用接口
qqmapsdk.calculateDistance({
 mode: 'walking';//步行，驾车为'driving'
 to:[{
   latitude: 39.984060,
   longitude: 116.307520
 }, {
   latitude: 39.984572,
   longitude: 116.306339
 }],
 success: function(res) {
   console.log(res);
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});

5.4 Il existe également les fonctions suivantes, je ne vais donc pas les démontrer une par une.

1. getCityList(options:Object) : récupère les données de la liste nationale des villes

2. getDistrictByCityId(options:Object) : renvoie la liste des villes par ; ID de la ville Districts et comtés ;

3. reverseGeocoder(options:Object) : utilisé pour obtenir des informations complètes et des conseils sur les mots-clés de saisie afin d'aider les utilisateurs à saisir rapidement

4. geocoder(options:Object) : fournit la conversion de la description de l'adresse en coordonnées de localisation, ce qui est exactement le contraire du processus du géocodeur inversé().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!