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

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

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

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

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

步骤：

1. 申请开发者密钥（key）：申请密匙
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
3. 安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com
4. 小程序示例

结果效果图：

去购彩.png

5.核心类

5.1 地点搜索search(options:Object)

通过关键词keyword搜索周边poi，比如“酒店”“餐饮”“娱乐”“学校”等

去购彩界面的实现：

5.1.1 buy.js

<div class="jb51code">
<pre class="brush:js;">
// 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';
  　}
  }

  5.1.2 buy.wxml 主要样式采用weui

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

  用于获取输入关键字的补完与提示，帮助用户快速输入。

  示例：

  5.3 距离计算calculateDistance(options:Object)

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

  示例：

  5.4 另外还有以下功能，就不一一演示了。

  1. getCityList(options:Object)：获取全国城市列表数据；
  2. getDistrictByCityId(options:Object)：通过城市ID返回城市下的区县；
  3. reverseGeocoder(options:Object)：用于获取输入关键字的补完与提示，帮助用户快速输入
  4. geocoder(options:Object)：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。

  感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!