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

2019-11-02 18:22:19

字体：大中小

来源：转载

供稿：网友

	最近公司有个需求,让开发一个相对精确的定位功能,我们是微信二次开发,不像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都可以注意获取到的经纬度信息是腾讯地图的经纬度信息，不同地图用的经纬度互相都不一样如果要使用于其他地图的定位（如百度地图），要去找类似于:(腾讯经纬度转百度经纬度)的转化方法才能使用。欢迎大家提意见