如何使用騰訊位置服務地圖選點元件？
阿新 • • 發佈：2021-01-19
本文主要使用到的功能為：
1、選擇地址傳送（地圖選點元件 ）
2、實時地址靜態圖
3、地圖調起
,手機檢視
選址元件主要是選地點的資訊，如下：
在js或者資料庫中儲存這些資訊，靜態圖片和地圖API的調起就要用到這些資訊，主要還是經緯度。
可以用在聊天傳送定位的功能中。
Demo中把key替換成你的key
key申請地址：https://lbs.qq.com/dev/console/key/manage
<html> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="telephone=no" name="format-detection" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #mapPage { display: none; } </style> <body> <div> <a id="lookLoc" href="https://apis.map.qq.com/uri/v1/marker?marker=coord:22.51595,113.3926;title:接收的地位;addr:中山市政府&referer=myapp">點選檢視位置</a> <img id="imgLoc" src="https://apis.map.qq.com/ws/staticmap/v2/?center=22.520843533080377,113.38995007717672&zoom=12&size=150*75&scale=2&maptype=roadmap&markers=size:large|color:red|22.520843533080377,113.38995007717672&key=you key" alt="定位地圖" onclick="lookLoc()" /><br/> <div id="locInfo"></div> </div> <input type="button" value="傳送定位" id="send" /> <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&total=1&key=you key&effect=zoom&referer=rcwwap"></iframe> </body> </html> <script> var hrefStr = "https://apis.map.qq.com/uri/v1/marker?"; var imgSrc = "https://apis.map.qq.com/ws/staticmap/v2/?center="; var imgSrc2 = "&zoom=16&size=150*75&scale=2&maptype=roadmap&markers=size:large|color:red|"; var imgStr3 = "&key=you key"; var pointStr = ""; $(document).ready(function() { var loc; $("#mapPage").hide(); $("#send").click(function() { $('#mapPage').attr('src', $('#mapPage').attr('src')); $("#mapPage").css("display", "inline-block"); }) }); window.addEventListener('message', locationPicker, false); //選址 function locationPicker(event) { // 接收位置資訊，使用者選擇確認位置點後選點元件會觸發該事件，回傳使用者的位置資訊 loc = event.data; console.log('locationassa', loc); console.log("註冊message事件"); if (loc && loc.module == 'locationPicker') { //防止其他應用也會向該頁面post資訊，需判斷module是否為'locationPicker' console.log('選址location', loc); $("#mapPage").hide(); pointStr = loc.latlng.lat + "," + loc.latlng.lng; $("#locInfo").text(pointStr + " " + loc.poiname + " " + loc.poiaddress); $("#lookLoc").attr("href", hrefStr + "marker=coord:" + pointStr + ";title:" + loc.poiname + ";addr:" + loc.poiaddress + "&referer=myapp"); $("#imgLoc").attr("src", imgSrc + pointStr + imgSrc2 + pointStr + imgStr3); alert("選址成功"); } } </script>
注意
1、選址的過程中，拖拽地圖時，雖然下面的地址列表會跟著更新，但是不會預設第一個，還需要點選一下地址列表。不像微信一樣在拖拽過程中會預設第一個，拖拽完就可以點擊發送。如果要做跟微信一樣的功能，在拖拽後就需要點選一下地址列表，再點擊發送。目前地圖元件不支援自定義，例如拖拽地圖的事件。
2、地圖選點元件是有定位功能的，在你開啟地圖時，第一個會顯示“我的位置”。
物件的資料也是顯示“我的位置”，如果你是把定位發給別人。別人看到也會是“我的位置”。可以這麼處理，在選完地址後，判斷一下poiname的值是不是等於“我的位置”，如果是則把poiaddress的值賦值給poiname（這裡因為是電腦定位，所有沒有準確和沒有詳細的地址）。
作者：啊林博士
連結：https://blog.csdn.net/Doctor_LY/article/details/86677607
來源：CSDN
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。