移動web端使用騰訊地圖實現定位功能

2024-04-27 15:18:12

字體：大中小

來源：轉載

供稿：網友

	最近公司有個需求,讓開發一個相對精確的定位功能,我們是微信二次開發,不像APP那種可以有專門的組件或插件來實現,于是就開始了和度娘進行了三天的感情溝通,一開始用百度地圖API,結果最后的經緯度數據誤差很大,而且iphone上用不了, 于是又查資料,最后鎖定HTML5的,但結果卻是iphone用不了(具體原因參考),不過精度還可以(HTML5定位原理),最后在一前輩的指導下終于解決問題(使用騰訊地圖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=mapqqvar geolocation = new qq.maps.Geolocation("騰訊注冊的密匙", "mapqq");var options = {timeout: 8000};
	//sucCallback:定位成功的回調,;showErr:定位失敗的回調;options為定位選項，選填,timeout:可以通過參數設置定位的超時時間，默認值為10s,		failTipFlag: 是否在定位失敗時給出提示引導用戶打開授權或打開定位開關。（即將支持）	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都可以注意獲取到的經緯度信息是騰訊地圖的經緯度信息，不同地圖用的經緯度互相都不一樣如果要使用于其他地圖的定位（如百度地圖），要去找類似于:(騰訊經緯度轉百度經緯度)的轉化方法才能使用。歡迎大家提意見