小程序,WebService服务端,需要使用地图服务的小伙伴可以认真阅读!!!
功能包括(位置定位及标记标点, 输入位置转换经纬度)满足你的需求,废话不多说,开始了。
一,小程序 接入地图分以下几步:(将地址转换为坐标,再将坐标传给微信小程序地图接口)
1、申请地图使用Key(必须)
访问腾讯地图服务 : http://lbs.qq.com/qqmap_wx_jssdk/index.html;申请自己的Key;
2、下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0;
3、 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
4、小程序代码 (简书格式不支持,需要粘贴后自己调一下)
// 引入SDK核心类
var QQMapWX = require(' xxx/qqmap-wx-jssdk.js');
Page({
data: {
//小程序调用地图的3个参数组,下面获取了地址坐标再具体传入值
markers: '', polyline: '', controls: '',
//用户输入的地址
path: '',
},
onLoad: function (options){
var that = this;
var path = options.path;//获取用户传入的地址
// 实例化API核心类
var demo = new QQMapWX({ key: 'XXXXX-XXXXX-G3M4Z-XXXXX-M5PC3-OWBMO' // 必填,换成自己申请的 });
// 调用接口,将用户输入地址转换为坐标(经纬度)
demo.geocoder({
address: path, //传入地址( address: '北京故宫', )
success: function (res) {
var path = res.result.location; //接口调用成功,取得地址坐标!!
//这里是调用小程序提供的地图接口,将上面获取的坐标传入
that.setData({
path:path,
markers: [{ iconPath: "/resources/others.png", id: 0, //地图位置坐标 latitude: path.lat, longitude: path.lng, width: 50, height: 50 }],
polyline: [{
points: [{ // 红标终点坐标 latitude: path.lat, longitude: path.lng, }, { //地图红线起点坐标 latitude: path.lat, longitude: path.lng, }], color: "#FF0000DD", width: 2, dottedLine: true }],
controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 600 - 50, width: 50, height: 50 }, clickable: true }]
})
console.log(res);
},
fail: function (res) { // console.log(res); },
complete: function (res) { // console.log(res); }
});
},
regionchange(e) { console.log(e.type) },
markertap(e) { console.log(e.markerId) },
controltap(e) { console.log(e.controlId) }}
小程序的调用成功!!!
二、web端的地图调用
1、申请Key(同小程序)
2、//GET请求,注意参数值要进行URL编码 (地址转坐标)
3、坐标转地址(精准定位) GET请求示例,注意参数值要进行URL编码
三、若有其他需求,请参考 腾讯地图网站:http://lbs.qq.com/webservice_v1/index.html;
有什么不对的,或不懂的,欢迎留言讨论
END