菜单

微信小程序 使用腾讯地图SDK详解及实现步骤

2019年6月20日 - 金沙前端

去购彩分界面包车型大巴完毕:

  1. getCityList(options:Object):获取全国都会列表数据;
  2. getDistrictByCityId(options:Object):通过城市ID重临城市下的区县;
  3. reverse吉优coder(options:Object):用于获取输加入关贸总协定组织键字的补完与唤醒,支持用户迅速输入
  4. geocoder(options:Object):提供由地点描述到所述地方坐标的转移,与逆地址深入分析reverse吉优coder()的进度恰好相反。

5.1 地点搜索search(options:Object)

  1. 提请开拓者密钥(key):申请密匙
  2. 金沙线上,下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0
  3. 康宁域名设置,需求在微信公众平台增添域名地点
  4. 小程序示例

 这段时间在做一款彩票服务类项目中用到了腾讯地图提供的小程序消除方案,拿来给大家分享一下!

金沙国际网上娱乐,示例:

4166金沙客户端,微信小程序 使用腾讯地图SDK详解及完成步骤

5.1.2 buy.wxml 首要样式选取weui

步骤:

  官方文书档案:

<view class="page">
<view wx:for="{{resData}}" wx:key="shop" class="page__bd">
 <view bindtap="navTo" data-item="{{item}}">
  <view class="weui-panel">
   <view class="weui-panel__bd">
    <view class="weui-media-box weui-media-box_text">
     <view class="weui-media-box__title weui-media-box__title_in-text">{{item.title}}</view>
     <view class="weui-media-box__desc">{{item.address}}</view>
     <view class="weui-media-box__info">
      <view class="weui-media-box__info__meta">电话:{{item.tel}}</view>
      <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">距离:{{item._distance}}</view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
</view>
// 调用接口
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.核心类

计量贰个点到多点的徒步、驾乘离开。

金沙国际网上娱乐 1

5.3 距离计算calculateDistance(options:Object)

5.4 其它还应该有以下职能,就不一一演示了。

去购彩.png

5.2 关键词输入提醒getSuggestion(options:Object)

5.1.1 buy.js

经过机要词keyword寻觅周围poi,例如“酒馆”“餐饮”“娱乐”“高校”等

// 引入腾讯地图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) + 'm';
 } else if (num > 1000) {
  return (num / 1000).toFixed(1) + 'km';
 }
}
// 调用接口
qqmapsdk.getSuggestion({
 keyword: '技术',
 success: function(res) {
   console.log(res); 
 },
 fail: function(res) {
   console.log(res);
 },
 complete: function(res) {
   console.log(res);
 }
});
// 引入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);
   }
 });
})

多谢阅读,希望能帮衬到大家,多谢大家对本站的协理!

你大概感兴趣的篇章:

  使用起来特别轻松,正是一对功能还只怕有待健全。

示例:

用来获取输加入关贸总协定协会键字的补完与唤醒,辅助用户快捷输入。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图