ホームページ > WeChat アプレット > ミニプログラム開発 > Tencent Map SDK を使用して WeChat ミニ プログラムを実装する手順の詳細な紹介

Tencent Map SDK を使用して WeChat ミニ プログラムを実装する手順の詳細な紹介

高洛峰
リリース: 2017-03-18 09:27:17
オリジナル
5766 人が閲覧しました

この記事では、WeChat ミニ プログラムで Tencent Map SDK を使用する方法に関する関連情報を提供します。必要な友達は参考にしてください

WeChat ミニ プログラムの詳細と実装手順について説明します

宝くじに取り組んでいます Tencent Maps が提供するミニ プログラム ソリューションがサービス プロジェクトで使用されています。

使い方はとても簡単ですが、いくつかの機能はまだ改善する必要があります。

公式ドキュメント: lbs.qq.com/qqmap_wx_jssdk/index.html

手順:

  1. 開発者キーの申請(key): キーの申請

  2. WeChatアプレットのダウンロードJavaScriptSD K 、WeChatミニ プログラム JavascriptSDK v1.0

  3. 安全なドメイン名設定、WeChat パブリック プラットフォームにドメイン名アドレス apis.map.qq.com を追加する必要があります

  4. ミニ プログラムの例

// 引入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);
   }
 });
})
ログイン後にコピー

結果のレンダリング:

Tencent Map SDK を使用して WeChat ミニ プログラムを実装する手順の詳細な紹介

lottery.png に移動

5. コアカテゴリ

5.1 位置検索検索(オプション:オブジェクト)

「ホテル」などのキーワードで周辺のPOIを検索します

宝くじ購入インターフェイスの実装:

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 buy.wxml メインスタイルは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 キーワード入力プロンプト getSuggestion(options :Object)

は、ユーザーが迅速に入力できるように、入力キーワードの補完とヒントを取得するために使用されます。

例:

// 调用接口
qqmapsdk.getSuggestion({
 keyword: &#39;技术&#39;,
 success: function(res) {
   console.log(res); 
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});
ログイン後にコピー

5.3 距離の計算calculateDistance(options:Object)

1 点から複数点までの徒歩または車での距離を計算します。

例:

// 调用接口
qqmapsdk.calculateDistance({
 mode: &#39;walking&#39;;//步行,驾车为&#39;driving&#39;
 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 以下のような関数もありますので、一つずつの説明は省略します。

  1. getCityList(options:Object): 全国都市リストデータを取得します。

  2. getDistrictByCityId(options:Object): 都市 ID を介して都市の地区と郡を返します。 Object): 入力キーワードの補完とプロンプトを取得し、ユーザーが迅速に入力できるようにするために使用します。

  3. geocoder(options:Object): 住所の説明から位置座標への変換を提供します。これは、リバース ジオコーダー( )。

以上がTencent Map SDK を使用して WeChat ミニ プログラムを実装する手順の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート