腾讯地图接入(定位,位置转经纬度),小程序,WebService服务端

小程序,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编码 (地址转坐标)

        http://apis.map.qq.com/ws/geocoder/v1/?address=北京市海淀区彩和坊路海淀西大街74号&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77;

    3、坐标转地址(精准定位) GET请求示例,注意参数值要进行URL编码    

        http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1

三、若有其他需求,请参考 腾讯地图网站:http://lbs.qq.com/webservice_v1/index.html;

有什么不对的,或不懂的,欢迎留言讨论

END

你可能感兴趣的:(腾讯地图接入(定位,位置转经纬度),小程序,WebService服务端)