登录  /  注册

微信小程序实现使用腾讯地图SDK步骤详细介绍

高洛峰
发布: 2017-03-18 09:27:17
原创
5452人浏览过

这篇文章微信小程序实现使用腾讯地图sdk步骤详细介绍的相关资料,需要的朋友可以参考下

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

 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!

  使用起来非常简单,就是一些功能还有待完善。

  官方文档:lbs.qq.com/qqmap_wx_jssdk/index.html

步骤:

  1. 申请开发者密钥(key):申请密匙

  2. 下载微信小程序JavascriptSDK,微信小程序JavascriptSDK v1.0

  3. 安全域名设置,需要在微信公众平台添加域名地址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);
   }
 });
})
登录后复制

结果效果图:

微信小程序实现使用腾讯地图SDK步骤详细介绍

去购彩.png

5.核心类

5.1 地点搜索search(options:Object)

通过关键词keyword搜索周边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)

计算一个点到多点的步行、驾车距离。

示例:

// 调用接口
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):提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

以上就是微信小程序实现使用腾讯地图SDK步骤详细介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号