騰訊地圖H5位置獲取

阿新 • • 發佈：2018-11-10

騰訊地圖H5位置獲取

直接ctrl+c 就行了
直接開啟

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>前端定位模組</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" 
>
   <style>
       * {
           margin: 0;
           padding: 0;
           border: 0;
       }
       body {
           position: absolute;
           width: 100%;
           height: 100%;
           text-align: center;
       }
       #pos-area {
           background-color: #009DDC;
           margin- 
bottom: 10px;
           width: 100%;
           overflow: scroll;
           text-align: left;
           color: white;
       }
       #demo {
           padding: 8px;
           font-size: small;
       }
       #btn-area {
           height: 100px;
       }
       button {
           margin-bottom: 10 
px;
           padding: 12px 8px;
           width: 42%;
           border-radius: 8px;
           background-color: #009DDC;
           color: white;
       }
   </style>
   <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>
   <div id="pos-area">
       <p id="demo">點選下面的按鈕，獲得對應資訊：<br /></p>
   </div>

   <div id="btn-area">
       <button onClick="geolocation.getLocation(showPosition, showErr, options)">獲取精確定位資訊</button>
       <button onClick="geolocation.getIpLocation(showPosition, showErr)">獲取粗糙定位資訊</button>
       <button onClick="showWatchPosition()">開始監聽位置</button>
       <button onClick="showClearWatch()">停止監聽位置</button>
   </div>
   <script type="text/JavaScript">
       var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");

       document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';

       var positionNum = 0;
       var options = {timeout: 8000};
       function showPosition(position) {
           positionNum ++;
           document.getElementById("demo").innerHTML += "序號：" + positionNum;
           document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
           document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
       };

       function showErr() {
           positionNum ++;
           document.getElementById("demo").innerHTML += "序號：" + positionNum;
           document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失敗！";
           document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
       };

       function showWatchPosition() {
           document.getElementById("demo").innerHTML += "開始監聽位置！<br /><br />";
           geolocation.watchPosition(showPosition);
           document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
       };

       function showClearWatch() {
           geolocation.clearWatch();
           document.getElementById("demo").innerHTML += "停止監聽位置！<br /><br />";
           document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
       };
   </script>
</body>
</html>

還有一份

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Geolocation Components Demo - zoom effect</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,
   minimum-scale=1,maximum-scale=1,user-scalable=no">
   <style>
       * {margin: 0; padding: 0; border: 0;}
       body {
           position: absolute;
           width: 100%;
           height: 100%;
       }
       #geoPage, #markPage {
           position: relative;
       }
   </style>
</head>
<body>
   <!--  通過 iframe 嵌入前端定位元件，此處沒有隱藏定位元件，使用了定位元件的在定位中視覺特效  -->
   <iframe id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no"
   src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>

   <script type="text/JavaScript">
       var loc;
       var isMapInit = false;
       //監聽定位元件的message事件
       window.addEventListener('message', function(event) {
           loc = event.data; // 接收位置資訊
           console.log('location', loc);

           if(loc  && loc.module == 'geolocation') { //定位成功,防止其他應用也會向該頁面post資訊，需判斷module是否為'geolocation'
               var markUrl = 'https://apis.map.qq.com/tools/poimarker' +
               '?marker=coord:' + loc.lat + ',' + loc.lng +
               ';title:我的位置;addr:' + (loc.addr || loc.city) +
               '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
               //給位置展示元件賦值
               document.getElementById('markPage').src = markUrl;
           } else { //定位元件在定位失敗後，也會觸發message, event.data為null
               alert('定位失敗');
           }

           /* 另一個使用方式
           if (!isMapInit && !loc) { //首次定位成功，建立地圖
               isMapInit = true;
               createMap(event.data);
           } else if (event.data) { //地圖已經建立，再收到新的位置資訊後更新地圖中心點
               updateMapCenter(event.data);
           }
           */
       }, false);
       //為防止定位元件在message事件監聽前已經觸發定位成功事件，在此處顯示請求一次位置資訊
       document.getElementById("geoPage").contentWindow.postMessage('getLocation', '*');

       //設定6s超時，防止定位元件長時間獲取位置資訊未響應
       setTimeout(function() {
           if(!loc) {
               //主動與前端定位元件通訊（可選），獲取粗糙的IP定位結果
           document.getElementById("geoPage")
               .contentWindow.postMessage('getLocation.robust', '*');
           }
       }, 6000); //6s為推薦值，業務呼叫方可根據自己的需求設定改時間，不建議太短
   </script>

   <!-- 接收到位置資訊後 通過 iframe 嵌入位置標註元件 -->
   <iframe id="markPage" width="100%" height="70%" frameborder=0 scrolling="no" src=""></iframe>
</body>
</html>

騰訊地圖H5位置獲取

騰訊地圖H5位置獲取直接ctrl+c 就行了直接開啟 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

Python3.7爬取騰訊地圖關鍵詞位置及電話資訊

朋友創業需要拓展客戶，閒來無事幫朋友搞些資料，網上看到的全是爬取百度地圖的資料，無奈百度地圖AK一直申請不來，便摸索著做個騰訊地圖的小爬蟲，些許小感慨：資料時代，共享無限，隱私難藏啊！實現功能通過指定關鍵詞，自動搜尋騰訊地圖全國範圍內的相關位置及電話資訊，並將結果輸出

python 通過騰訊地圖API獲取全國關鍵詞（樓盤/商場）位置資訊

到騰訊地圖API官網https://lbs.qq.com/index.html 申請一張賬號，申請開發者金鑰（Key）：申請金鑰。以下為搜尋全國萬達的地理位置資訊 #!coding=utf-8 import requests import re import rand

iOS 使用騰訊地圖顯示用戶位置註意事項

nag rgb system current info cti iap level zoom 1. 向 target中info 加入 NSLocationWhenInUseUsageDescription，string 類型。值是描寫敘述為什麽須要用

微信小程序 - 輸入起點、終點獲取距離並且進行路線規劃（騰訊地圖）

img -c con XML family maps option space com index.wxml  <map id="myMap" style="width: 100%; height: 300px;"

呼叫騰訊地圖API 獲得當前地理位置

https://lbs.qq.com/ 騰訊地圖API網址當時產品說需要做一個定位當前使用者的地址位置的這麼一個需求找了半天最後選擇使用騰訊地圖API 在使用騰訊地圖的時候需要去申請一個開

webview中巢狀html實現精準定位（百度地圖、高德地圖、騰訊地圖、H5原生定位）js對比

最近在實現一個功能，就是在安卓手機和蘋果手機嵌入html程式碼，實現精準定位，我為此對比幾種定位的方法。我要的是精準定位，就是誤差在100米左右的功能，類似與外賣app那種定位精確度 1. 首先是原生h5定位 if(browser.versions.an

騰訊地圖逆地址解析，通過經緯度獲取詳細的資訊資料

根據騰訊地圖API，以圖文的方式一步一步的來說明如何獲取詳細的位置資訊資料。具體參考騰訊地圖Webservice API的簡介。騰訊地圖WebService API 　　第一步：申請開發者金鑰（key）申請金鑰　　　　　　我選擇的應用型別為瀏覽器型別（呼叫Javascr

呼叫騰訊地圖API 獲得當前地理位置！！！

當時產品說需要做一個定位當前使用者的地址位置的這麼一個需求找了半天最後選擇使用騰訊地圖API 在使用騰訊地圖的時候需要去申請一個開發金鑰可在快速入門》接入指引找到如何申請金鑰第一步：第二步：選擇之後可看到他官方的一些示例可以

PHP:利用php cURL來獲取騰訊地圖的相關資料

利用php cURL來獲取騰訊地圖的相關資料【前言】在開發過程中，經常會用到地圖、定位、城市列表等相關的資料，這時候我們就需要呼叫騰訊地圖相應的介面來獲取這些資料。今天就說一下如何利用php的cURL函式來獲取這些資料。採用三個簡單的例子來說明：

h5判斷百度、高德、騰訊地圖客戶端是否安裝及調起客戶端導航

(function($, navigation) { navigation.getLocation = function(callback) { callback = callback || $.noop; plus.geolocat

如何在百度地圖、騰訊地圖標註公司地址信息?

比如百度地圖、騰訊地圖、高德地圖是可以標註公司位置的，不一定是店鋪。所以我們有機會把公司地址在地圖裏標註出來，這樣以後客戶拜訪時就會非常方便。我們遇到很多朋友都是花了幾百塊錢做地圖標註，實際上這一切都是免費的。首先，我們來看看地圖標註效果。微信應用場景案例展

php 百度地圖騰訊地圖轉換坐標

() gcj02 OS bsp double -- php 地圖 code /** * 中國正常GCJ02坐標---->百度地圖BD09坐標 * 騰訊地圖用的也是GCJ02坐標 * @param double $lat 緯度 * @param

由經緯度坐標得到騰訊地圖的瓦片/切片行列號

完整解決方法 tile 方法深圳 style earth tails ring 參考：https://blog.csdn.net/mygisforum/article/details/22997879 　　　https://blog.csdn.net/u01392928

微信小程式-騰訊地圖顯示偏差問題

背景在小程式中使用map元件，可以呼叫騰訊地圖的API，將一些固定的點標記到地圖介面上，點的經緯度獲取是通過android端百度地圖API獲取的，所以此時將這個位置點資訊直接設定上去會出現偏差，而且偏差還比較大小程式設定位置點關於如何在map元件上設定位置點，詳細請檢視騰訊官方文件首先

騰訊地圖覆蓋物新增點選事件及說明資訊------vue

export default { props: { words: { type: String, default: '' } }, data() { return { searchService: [], map:

騰訊地圖和百度地圖的PHP相互轉換

/** * 百度地圖---->騰訊地圖 * @param double $lat 緯度 * @param double $lng 經度 * @return array(); */ function Convert_BD09_To_GCJ02($lat,$lng){ $x_pi =

百度、騰訊地圖正/逆地址解析 javascript

專案用到正逆地址解析，記錄一下以便再次使用，介面可用於非同步GET請求，script方式，h5頁面，小程式，手機，同時可用於後端服務。 1.百度逆地址解析(根據經緯度獲取中文地址）百度文件 - 逆地址解析介面：http://api.map.baidu.co

Mysql Stored Routines 函式使用實現騰訊地圖距離計算

Mysql Stored Routines，有儲存過程(Procedures)和函式(Functions)，在實際專案使用中用的比較多，是傳統企業資訊系統的最愛，比如很多分析報表幾乎都依賴儲存過程實現。Mysql參考手冊給出了Stored Routines 2個常用使用場景：

騰訊地圖使用中，出現了“鑑權失敗，請傳入正確的key”

騰訊地圖使用中，出現了“鑑權失敗，請傳入正確的key”，需要到騰訊官方申請一個key. 如圖所示，複製KEY過來，找到報錯頁面，加上 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=xxxxx-xxxxx-x

騰訊地圖H5位置獲取

騰訊地圖H5位置獲取

相關推薦