Detaillierte Einführung in die Schritte zur Implementierung des WeChat-Miniprogramms mit dem Tencent Map SDK

Dieser Artikel enthält relevante Informationen zu den detaillierten Schritten zur Verwendung des Tencent MapSDK in WeChat Mini-Programmen. Freunde, die es benötigen, können auf die

Detaillierte Erklärung zur Verwendung von Tencent zurückgreifen Karten-SDK in WeChat-Miniprogrammen. Und Implementierungsschritte

Kürzlich habe ich die Miniprogrammlösung von Tencent Maps in einem Lotteriedienstprojekt verwendet und möchte sie mit Ihnen teilen!

Die Bedienung ist sehr einfach, einige Funktionen müssen jedoch noch verbessert werden.

Offizielles Dokument: lbs.qq.com/qqmap_wx_jssdk/index.html

Schritte:

1. Anwenden Entwicklerschlüssel (Schlüssel): Schlüssel beantragen

2. WeChat Mini Program JavascriptSDK, WeChat Mini Program JavascriptSDK v1.0 herunterladen

3. Sichere Domänennameneinstellungen, Sie müssen die Domänennamenadresse apis.map.qq.com auf der öffentlichen WeChat-Plattform hinzufügen
   

4. Miniprogrammbeispiel

// 引入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);
   }
 });
})

Ergebnisdarstellungen:

Gehe zu lottery.png kaufen

5 . Kernklassen

5.1 Standortsuche (Optionen:Objekt)

Suche nach umliegenden POI anhand von Schlüsselwörtern wie „Hotel“. " und „Catering“, „Unterhaltung“, „Schule“ usw.

Implementierung der Lotteriekaufschnittstelle:

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 Der Hauptstil von buy.wxml übernimmt 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 Eingabeaufforderungen für Schlüsselwörter getSuggestion(options:Object)

wird verwendet um die Vervollständigung und Eingabeaufforderungen der eingegebenen Schlüsselwörter zu erhalten, um Benutzern eine schnelle Eingabe zu erleichtern.

Beispiel:

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

5.3 Entfernungsberechnung berechneDistanz(optionen:Objekt)

Berechnen Sie die Geh- oder Fahrentfernung von einem Punkt zu mehreren Punkten .

Beispiel:

// 调用接口
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 Es gibt auch die folgenden Funktionen, daher werde ich sie nicht einzeln demonstrieren.

1. getCityList(options:Object): Ruft die nationalen Städtelistendaten ab;

2. getDistrictByCityId(options:Object): Gibt die Städteliste zurück von Stadt-ID-Bezirke und Landkreise;

3. reverseGeocoder(options:Object): wird verwendet, um Vervollständigungen und Tipps für Eingabeschlüsselwörter zu erhalten, um Benutzern die schnelle Eingabe zu erleichtern

4. geocoder(options:Object): Bietet Konvertierung von der Adressbeschreibung in die Standortkoordinaten, was genau das Gegenteil des Prozesses von Reverse Geocoder() ist.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Schritte zur Implementierung des WeChat-Miniprogramms mit dem Tencent Map SDK. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!