最近公司有个H5的APP需要定位功能，我开始用百度的发现只能定位到某个区，于是又换了高德，发现挺准的了，公司觉得还不够，又找了腾讯的地图，于是我把三家的一起写在一个页面给他们选，现在也记录下给大家参考下：
相应的key 就自己去申请，写上就好了
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>浏览器定位</title>
<!-- 高德 -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=你的key"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<!-- 百度 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
<!-- 腾讯 -->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<body>
<div id='container'></div>
<div id="tip"></div>
<p id="demo">腾讯地图定位成功：<br /></p>
<script type="text/javascript">
// 腾讯地图部分
var geolocation = new qq.maps.Geolocation("你的key", "myapp");
//精确定位
geolocation.getLocation(showPosition, showErr, options)
var options = {timeout: 3000};
function showPosition(position) {
console.log("腾讯定位");
console.log(position);
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
};
function showErr() {
console.log("腾讯定位失败");
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = "腾讯地图定位失败";
};
// 高德地图部分
var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('iCenter');
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var str=['高德地图定位成功'];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
str.push('位置:' + data.formattedAddress);
document.getElementById('tip').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
// 百度地图部分
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
var latitude=p.coords.latitude;//获取坐标点纬度
var longitude=p.coords.longitude;//获取坐标点经度
//以指定的经度与纬度创建一个坐标点
var po=new BMap.Point(longitude,latitude);
//创建一个地理解析器
var geocoder=new BMap.Geocoder();
//获取位置
geocoder.getLocation(po,function(rs){
//获取地理组件
var addComp=rs.addressComponents;
//获取省份
var province=addComp.province;
//获取城市
var city=addComp.city;
//获取区县
var district=addComp.district;
//获取街道
var street=addComp.street;
//获取街道号
var streetNumber=addComp.streetNumber;
var str=['百度地图定位成功'];
str.push('经度：' + longitude);
str.push('纬度：' + latitude);
str.push('位置:' + province+city+district+street+streetNumber);
document.getElementById('container').innerHTML = str.join('<br>');
});
},function(e){
switch (e.code) {
case e.TIMEOUT:
alert("定位失败，请求获取用户位置超时");
break;
case e.PERMISSION_DENIED:
alert("您拒绝了使用位置服务功能，查询已取消");
break;
case e.POSITION_UNAVAILABLE:
alert("抱歉，暂时无法为您所在的星球提供位置服务");
break;
case e.UNKNOWN_ERROR:
alert("发生一个位置错误");
break;
}
},{
//指示浏览器获取高精度的位置，默认false
enableHighAcuracy: true,
//指定获取地理位置的超时时间，默认不限时，单位为毫秒
timeout:5000,
//最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置
maximumAge:2000
}
);
}else{
alert("不支持");
}
</script>
<style type="text/css">
#container{
margin: 200px auto 0 auto;
}
#demo{
margin: 360px auto 0 auto;
background-color: #efefef;
}
</style>
</body>
</html>
[获取授权]
