返回

在微信小程序中如何使用腾讯地图SDK?在微信小程序中使用腾讯地图SDK的方法是什么?

时间:2017年04月04日 04:56评论:0

在微信小程序中如何使用腾讯地图SDK?在微信小程序中使用腾讯地图SDK的方法是什么?

今天小编给大家带来的就是在微信小程序中使用腾讯地图SDK的详细步骤,想要了解的朋友就跟小编一起来看看吧。

步骤:

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

下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0

安全域名设置,需要在微信公众平台添加域名地址

小程序示例

// 引入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.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 另外还有以下功能,就不一一演示了。

getCityList(options:Object):获取全国城市列表数据;

getDistrictByCityId(options:Object):通过城市ID返回城市下的区县;

reverseGeocoder(options:Object):用于获取输入关键字的补完与提示,帮助用户快速输入

geocoder(options:Object):提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

相关文章
猜你喜欢
用户评论