腾讯地图定位及坐标解析
生活随笔
收集整理的這篇文章主要介紹了
腾讯地图定位及坐标解析
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
騰訊地圖定位及坐標解析
一個項目，需要打開地圖后點擊獲取地址
用的騰訊地圖開放平臺，對著文檔花了一上午弄出來了
代碼：
?
<!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>您在當?shù)奈恢?#xff08;經(jīng)度：<span id="now_lat"></span>，緯度：<span id="now_lng"></span>）<button type="button"οnclick="geolocation.getLocation(showPosition, showErr, options)">獲取當前位置</button></div><div>您點擊的位置（經(jīng)度：<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);//取出位置坐標了，設(shè)置地圖顯示出來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地址才能取得權(quán)限，在手機瀏覽器打開就可以不用了,還有記得在騰訊控制臺那里把webserviceapi打開并加上域名
預(yù)覽地址：https://www.niunan.net/qqmapdemo.html
總結(jié)
以上是生活随笔為你收集整理的腾讯地图定位及坐标解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在 HBuilderX 中使用 tail
- 下一篇： Minitab -软件介绍