推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序中使用腾讯地图sdk
发布时间:2020-12-07近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案，拿来给大家分享一下！
使用起来非常简单，就是一些功能还有待完善。
官方文档：
步骤：
申请开发者密钥（key）：申请密匙
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com
小程序示例
// 引入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); } }); })结果效果图：
去购彩.png
核心类
5.1 地点搜索search(options:Object)
通过关键词keyword搜索周边poi，比如“酒店”“餐饮”“娱乐”“学校”等
去购彩界面的实现：
5.1.1 buy.js
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>5.2 关键词输入提示getSuggestion(options:Object)
用于获取输入关键字的补完与提示，帮助用户快速输入。
示例：
5.3 距离计算calculateDistance(options:Object)
计算一个点到多点的步行、驾车距离。
示例：
5.4 另外还有以下功能，就不一一演示了。
getCityList(options:Object)：获取全国城市列表数据；
getDistrictByCityId(options:Object)：通过城市ID返回城市下的区县；
reverseGeocoder(options:Object)：用于获取输入关键字的补完与提示，帮助用户快速输入
geocoder(options:Object)：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
