當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动web端使用腾讯地图实现定位功能

發布時間：2023/12/29 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了移动web端使用腾讯地图实现定位功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近公司有個需求,讓開發一個相對精確的定位功能,我們是微信二次開發,不像APP那種可以有專門的組件或插件來實現,使用騰訊地圖API（支持HTTPS協議)提前準備:1: 先去騰訊地圖API官網注冊一個密匙.步驟很簡單; <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>使用騰訊地圖實現移動web定位</title><style type="text/css">*{margin:0px;padding:0px;}body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}#container{min-width:600px;min-height:767px;}</style> <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>  <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script> </head><body onload="coordinate()"><div id="container"></div></body> </html> <script type="text/javascript">var cityLocation, map, marker = null;/**用騰訊獲取坐標**/function coordinate(){方法和參數說明===========================================================/*** qq.maps.Geolocation(key, referer) 參數(官網提供)： * key ：必填，開發密鑰(key)，申請地址 http://lbs.qq.com/mykey.html;* referer：必填，調用來源，一般為您的應用名稱，為了保障對您的服務，請務必填寫！ * 例如：referer=mapqq為了保障對您的服務，請務必填寫！ ** sucCallback:定位成功的回調;** showErr:定位失敗的回調;* options為定位選項，選填;* timeout:可以通過參數設置定位的超時時間，默認值為10s;*/代碼實現部分===========================================================var geolocation = new qq.maps.Geolocation("騰訊注冊的密匙", "mapqq");var options = {timeout: 8000};geolocation.getLocation(sucCallback, showErr, options);}//定位成功回調function sucCallback(position){var mapInfo = JSON.stringify(position, null, 4);var jsonMapInfo = eval('('+mapInfo+')');alert("騰訊經度為:"+jsonMapInfo.lng+",騰訊緯度為:"+jsonMapInfo.lat);init();var latLng = new qq.maps.LatLng(jsonMapInfo.lat, jsonMapInfo.lng);citylocation.searchCityByLatLng(latLng);}//定位失敗回調function showErr(){alert("定位失敗"); }//初始化地圖function init(){var center = new qq.maps.LatLng(39.916527,116.397128);//設置中心點map = new qq.maps.Map(document.getElementById('container'),{//container:放置地圖div的id屬性center: center,zoom: 15 //地圖縮放級別});//調用城市服務信息citylocation = new qq.maps.CityService({complete : function(results){map.setCenter(results.detail.latLng);if (marker != null) {marker.setMap(null);}//設置marker標記marker = new qq.maps.Marker({map: map,position: results.detail.latLng});}});} </script> 本人親測,Android和iPhone都可以注意獲取到的經緯度信息是騰訊地圖的經緯度信息，不同地圖用的經緯度互相都不一樣如果要使用于其他地圖的定位（如百度地圖），要去找類似于:(騰訊經緯度轉百度經緯度)的轉化方法才能使用。歡迎大家提意見參考： https://lbs.qq.com/javascript_v2/demo.html

總結

以上是生活随笔為你收集整理的移动web端使用腾讯地图实现定位功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。