这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 使用腾讯地图 SDK 详解及实现步骤的相关资料, 需要的朋友可以参考下
微信小程序 使用腾讯地图 SDK 详解及实现步骤
近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下!
使用起来非常简单,就是一些功能还有待完善。
官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html
步骤:
- // 引入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. 核心类
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) + 'm';
- } else if (num > 1000) {
- return (num / 1000).toFixed(1) + 'km';
- }
- }
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)
用于获取输入关键字的补完与提示,帮助用户快速输入。
示例:
- // 调用接口
- 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 另外还有以下功能,就不一一演示了。
来源: http://www.phperz.com/article/17/0713/327199.html