騰訊地圖接入(定位,位置轉經緯度),小程序,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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。