> 위챗 애플릿 > 미니 프로그램 개발 > Tencent Map SDK를 사용하여 WeChat 미니 프로그램을 구현하는 단계에 대한 자세한 소개

Tencent Map SDK를 사용하여 WeChat 미니 프로그램을 구현하는 단계에 대한 자세한 소개

高洛峰
풀어 주다: 2017-03-18 09:27:17
원래의
5770명이 탐색했습니다.

이 글은 WeChat Mini 프로그램에서 Tencent MapSDK를 사용하는 자세한 단계에 대한 정보를 제공합니다. 필요한 친구는

Tencent 사용에 대한 자세한 설명을 참조하세요. WeChat 미니 프로그램의 Maps SDK 및 구현 단계

최근에는 복권 서비스 프로젝트에서 Tencent Maps에서 제공하는 미니 프로그램 솔루션을 사용하여 공유하고 싶습니다!

사용법은 매우 간단하지만 일부 기능은 아직 개선이 필요합니다.

공식 문서: lbs.qq.com/qqmap_wx_jssdk/index.html

단계:

  1. 신청 개발자 키(key): 키 신청

  2. WeChat Mini 프로그램 JavascriptSDK, WeChat Mini 프로그램 JavascriptSDK v1.0

  3. 보안 도메인 이름 설정, WeChat 공개 플랫폼에 도메인 이름 주소 apis.map.qq.com을 추가해야 합니다


  4. 미니 프로그램 예

  5. // 引入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 위치 검색 검색(옵션:

객체)

"호텔", " 케이터링" 및 "오락" ""학교" 등


복권 구매 인터페이스 구현:


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 Main 스타일은 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 거리 계산 계산 거리(options:Object)


한 지점에서 여러 지점까지의 도보 또는 주행 거리를 계산합니다.


예:

// 调用接口
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 구역 및 카운티

  3. reverseGeocoder(options:Object): 사용자가 빠르게 입력할 수 있도록 입력 키워드에 대한 완성 및 팁을 얻는 데 사용됩니다.

  4. geocoder(options:Object): 주소 설명에서 위치 좌표로의 변환을 제공합니다. 이는 역방향 geocoder()의 반대 프로세스입니다.

위 내용은 Tencent Map SDK를 사용하여 WeChat 미니 프로그램을 구현하는 단계에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿