调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
生活随笔
收集整理的這篇文章主要介紹了
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
調用騰訊地圖API、高德地圖API 獲取當前地理位置、經緯度
web開發中,很多情況下都會需要獲取當前位置的經緯度,在網上找了幾個不同的地圖,最終找到兼容比較好的騰訊地圖API
1、調用騰訊地圖API獲取當前地理位置、經緯度
第一步:先去騰訊地圖API官網注冊賬號,申請key
第二步:引入以上js地址:https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
第三步:寫就完事
getTXLocation:function (){var _this =this;var geolocation = new qq.maps.Geolocation("QNHBZ-55RKF-OMFJJ-NPU7O-EPSDH-ACBAA", "myapp");var options = {timeout: 8000};var latitude,longitude;geolocation.getLocation(showPosition, showErr, options);function showPosition(position) {console.log(position);latitude = position.lat; longitude = position.lng;_this.getShopmsg(latitude,longitude); //獲取到經緯度后的操作}function showErr() {console.log(position);} },再分享一個高德地圖的方法
2、調用高德地圖API獲取當前地理位置、經緯度
第一步:先去高德地圖API官網注冊賬號,申請key
第二步:引入js:<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
第三步:寫就完事
getGDLocation:function () {let _this = this;var map, geolocation;mapObj = new AMap.Map('iCenter');map = new AMap.Map('container', {});mapObj.plugin('AMap.Geolocation', function() {geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位,默認:truetimeout: 10000, //超過10秒后停止定位,默認:無窮大maximumAge: 0, //定位結果緩存0毫秒,默認:0convert: true, //自動偏移坐標,偏移后的坐標為高德坐標,默認:truebuttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量,默認:Pixel(10, 20)});mapObj.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息//解析定位結果function onComplete(data) {console.log(data);console.log(data.formattedAddress);let getLat = data.position.getLat();let getLng = data.position.getLng();console.log('緯度:' + getLat + ' 經度:' + getLng);_this.getShopmsg(getLat,getLng); //獲取到經緯度后的操作}AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息// 解析定位錯誤信息function onError(data) {console.log(data);alert('定位失敗');}}); }在PC端使用瀏覽器打開網頁高德地圖API會顯示 定位失敗,在手機上則成功,也可能是我的方法有誤。
親測使用騰訊地圖手機 pc 都OK,微信、支付寶打開都OK~
總結
以上是生活随笔為你收集整理的调用腾讯地图API、高德地图API 获取当前地理位置、经纬度的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jq轮播图插件
- 下一篇: app inventor我的漫画书