移動(dòng)web端使用騰訊地圖實(shí)現(xiàn)定位功能

2024-04-27 15:18:12

字體：大中小

供稿：網(wǎng)友

	最近公司有個(gè)需求,讓開發(fā)一個(gè)相對(duì)精確的定位功能,我們是微信二次開發(fā),不像APP那種可以有專門的組件或插件來(lái)實(shí)現(xiàn),于是就開始了和度娘進(jìn)行了三天的感情溝通,一開始用百度地圖API,結(jié)果最后的經(jīng)緯度數(shù)據(jù)誤差很大,而且iphone上用不了, 于是又查資料,最后鎖定HTML5的,但結(jié)果卻是iphone用不了(具體原因參考),不過(guò)精度還可以(HTML5定位原理),最后在一前輩的指導(dǎo)下終于解決問(wèn)題(使用騰訊地圖API,因?yàn)樗С諬TTPS協(xié)議),于是現(xiàn)在整理出來(lái)以供需要的朋友參考,廢話說(shuō)完了,上代碼:	提前準(zhǔn)備:		1: 先去騰訊地圖API官網(wǎng)注冊(cè)一個(gè)密匙.步驟很簡(jiǎn)單;
<%@ 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>使用騰訊地圖實(shí)現(xiàn)移動(dòng)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><!-- 騰訊獲取坐標(biāo)需要引入的 --><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;	/**用騰訊獲取坐標(biāo)**/	function coordinate(){			//qq.maps.Geolocation(key, referer) 參數(shù)(官網(wǎng)提供)： key ： 必填，開發(fā)密鑰(key)，申請(qǐng)地址 http://lbs.qq.com/mykey.html 										referer： 必填，調(diào)用來(lái)源，一般為您的應(yīng)用名稱，為了保障對(duì)您的服務(wù)，請(qǐng)務(wù)必填寫！例如： referer=mapqqvar geolocation = new qq.maps.Geolocation("騰訊注冊(cè)的密匙", "mapqq");var options = {timeout: 8000};
	//sucCallback:定位成功的回調(diào),;showErr:定位失敗的回調(diào);options為定位選項(xiàng)，選填,timeout:可以通過(guò)參數(shù)設(shè)置定位的超時(shí)時(shí)間，默認(rèn)值為10s,		failTipFlag: 是否在定位失敗時(shí)給出提示引導(dǎo)用戶打開授權(quán)或打開定位開關(guān)。（即將支持）	geolocation.getLocation(sucCallback, showErr, options);	}	//定位成功回調(diào)	function sucCallback(position){		var mapInfo = JSON.stringify(position, null, 4);		var jsonMapInfo = eval('('+mapInfo+')');		alert("騰訊經(jīng)度為:"+jsonMapInfo.lng+",騰訊緯度為:"+jsonMapInfo.lat);		init();		var latLng = new qq.maps.LatLng(jsonMapInfo.lat, jsonMapInfo.lng);		citylocation.searchCityByLatLng(latLng);	}		//定位失敗回調(diào)	function showErr(){		alert("定位失敗");		}		//初始化地圖	function init(){		var center = new qq.maps.LatLng(39.916527,116.397128);//設(shè)置中心點(diǎn)		map = new qq.maps.Map(document.getElementById('container'),{//container:放置地圖div的id屬性	        center: center,	        zoom: 15	//地圖縮放級(jí)別	    });		//調(diào)用城市服務(wù)信息	    citylocation = new qq.maps.CityService({	        complete : function(results){	            map.setCenter(results.detail.latLng);	            if (marker != null) {	                marker.setMap(null);	            }	            //設(shè)置marker標(biāo)記	            marker = new qq.maps.Marker({	                map: map,	                position: results.detail.latLng	            });	        }	    });	}</script>	本人親測(cè),Android和iPhone都可以注意獲取到的經(jīng)緯度信息是騰訊地圖的經(jīng)緯度信息，不同地圖用的經(jīng)緯度互相都不一樣如果要使用于其他地圖的定位（如百度地圖），要去找類似于:(騰訊經(jīng)緯度轉(zhuǎn)百度經(jīng)緯度)的轉(zhuǎn)化方法才能使用。歡迎大家提意見