腾讯地图定位及坐标解析
生活随笔
收集整理的這篇文章主要介紹了
腾讯地图定位及坐标解析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
騰訊地圖定位及坐標解析
一個項目，需要打開地圖后點擊獲取地址
用的騰訊地圖開放平臺，對著文檔花了一上午弄出來了
代碼：
?
<!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>#pos-area{height:500px;width: 100%;}#poi_lat{color:red;}#poi_lng{color:green;}#poi_address{color:blue;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script><script type="text/javascript"src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> </head><body><h1>騰訊地圖測試</h1><div>您在當的位置（經度：<span id="now_lat"></span>，緯度：<span id="now_lng"></span>）<button type="button"οnclick="geolocation.getLocation(showPosition, showErr, options)">獲取當前位置</button></div><div>您點擊的位置（經度：<span id="poi_lat"></span>，緯度：<span id="poi_lng"></span>，解析出來的地址：<span id="poi_address"></span>）</div><div id="pos-area"></div><script type="text/JavaScript">var appkey ="A4KBZ-LUZE3-VPW3T-YGU5N-SIT2S-5ZFVH"; var geolocation = new qq.maps.Geolocation(appkey, "myapp"); var options = {timeout: 8000};$(function(){//加載完成后就取當前位置 geolocation.getLocation(showPosition, showErr, options); })function showPosition(position) {console.log(position);$('#now_lat').html(position.lat);$('#now_lng').html(position.lng);$('#poi_lat').html(position.lat); $('#poi_lng').html(position.lng);//取出位置坐標了，設置地圖顯示出來var map = new qq.maps.Map(document.getElementById("pos-area"), {// 地圖的中心地理坐標。center: new qq.maps.LatLng(position.lat,position.lng),zoom:15});//添加標記var marker = new qq.maps.Marker({position: new qq.maps.LatLng(position.lat,position.lng),map: map});//解析地址jiexiaddress(position.lat,position.lng);//綁定地圖點擊事件qq.maps.event.addListener(map, "click", function (e) {$('#poi_lat').html(e.latLng.getLat().toFixed(6));$('#poi_lng').html(e.latLng.getLng().toFixed(6));//先移除標記，再添加標記marker.setMap(null);marker = new qq.maps.Marker({position: new qq.maps.LatLng(e.latLng.getLat(),e.latLng.getLng()),map: map});jiexiaddress(e.latLng.getLat(),e.latLng.getLng());});};function showErr() { alert("定位失敗！"); };//解析地址 function jiexiaddress(lat,lng){var url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key="+appkey+"&output=jsonp&&callback=?");$.getJSON(url3, function (result) {if(result.result!=undefined){$('#poi_address').html(result.result.address);}else{$('#poi_address').html('');}}) }</script> </body></html>效果圖：
?
備注：微信里打的話需要用https地址才能取得權限，在手機瀏覽器打開就可以不用了,還有記得在騰訊控制臺那里把webserviceapi打開并加上域名
預覽地址：https://www.niunan.net/qqmapdemo.html
總結
以上是生活随笔為你收集整理的腾讯地图定位及坐标解析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在 HBuilderX 中使用 tail
- 下一篇： Minitab -软件介绍