微信小程序|小程序开发
微信小程序
微信小程序-小程序开发
这篇文章微信小程序实现使用腾讯地图SDK步骤详细介绍的相关资料,需要的朋友可以参考下
源码服务器,Ubuntu中终端cd,scrapy爬虫技术分析,roid php,seo 列表分页lzw
微信小程序 使用腾讯地图SDK详解及实现步骤
互联网舆情监测系统源码,Ubuntu启动是蓝屏,企业使用tomcat服务器,c 数据爬虫,株洲php开发培训班,潍坊seo排行lzw
近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案，拿来给大家分享一下！
下载asp网站源码下载,ubuntu设置扩展屏幕,爬虫怎么开始学,php增加页面,SEO添加商户lzw
使用起来非常简单，就是一些功能还有待完善。
官方文档：/qqmap_wx_jssdk/index.html
步骤：
申请开发者密钥（key）：申请密匙
下载微信小程序JavascriptSDK，微信小程序JavascriptSDK v1.0
安全域名设置，需要在微信公众平台添加域名地址apis.
小程序示例
// 引入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); } });})
结果效果图：
去购彩.jpg
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时 单位取km,一位小数点 */function formatDistance(num) {if (num 1000) {return (num / 1000).toFixed(1) + km;}}
5.1.2 buy.wxml 主要样式采用weui
{{item.title}}{{item.address}} 电话：{{item.tel}}距离：{{item._distance}}
5.2 关键词输入提示getSuggestion(options:Object)
用于获取输入关键字的补完与提示，帮助用户快速输入。
示例：
// 调用接口qqmapsdk.getSuggestion({ keyword: 技术, 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: 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.4 另外还有以下功能，就不一一演示了。
getCityList(options:Object)：获取全国城市列表数据；
getDistrictByCityId(options:Object)：通过城市ID返回城市下的区县；
reverseGeocoder(options:Object)：用于获取输入关键字的补完与提示，帮助用户快速输入
geocoder(options:Object)：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
