前端定位控件的使用，腾讯，高德，百度
项目经理让我去研究一下前台定位控件的使用，之后要求是适用于微信浏览器，就是微信公众号里面的网页，还要求适用于手机自带的浏览器，手机的uc浏览器等应用市场上的几款主流的浏览器（百度，QQ等）。之后选了很久，得出了一些心得，到时候在进行前端的控件的选择的时候，可以快速的选择不用在进行学习了。
一、腾讯地图api
直接找到腾讯地图的api，之后在里面找到了这个定位的demo，之后申请了也给开发的key，就可以出来了数据，在pc，手机应用市场里面的浏览器，以及手机自带的浏览器亲测好用，但是在微信里面无法使用，显示的是，定位超时，这个具体的，在腾讯的api里面没有查询到。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>腾讯前端定位模块</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#pos-area {
background-color: #009DDC;
margin-bottom: 10px;
width: 100%;
overflow: scroll;
text-align: left;
color: white;
}
#demo {
padding: 8px;
font-size: small;
}
#btn-area {
height: 100px;
}
button {
margin-bottom: 10px;
padding: 12px 8px;
width: 42%;
border-radius: 8px;
background-color: #009DDC;
color: white;
}
</style>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
<div id="pos-area">
<p id="demo">点击下面的按钮，获得对应信息：<br /></p>
</div>
<div id="btn-area">
<button onClick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button>
<button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button>
<button onClick="showWatchPosition()">开始监听位置</button>
<button onClick="showClearWatch()">停止监听位置</button>
</div>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("你的腾讯申请的key", "map");
document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
var positionNum = 0;
var options = {timeout: 8000};
function showPosition(position) {
positionNum ++;
document.getElementById("demo").innerHTML += "序号：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showErr() {
positionNum ++;
document.getElementById("demo").innerHTML += "序号：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showWatchPosition() {
document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";
geolocation.watchPosition(showPosition);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showClearWatch() {
geolocation.clearWatch();
document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
</script>
</body>
</html>下面两个分别是浏览器里面的效果和微信里面的效果。
二、百度地图
注册了一个百度的账号，之后申请一个应用，发现要注册白名单的域名，没办法为了测试进行域名的绑定，之后发现了三种定位模式，一种是浏览器定位，一种是ip定位，一种是sdk定位，经过测试，手机了里面都是好用了，之后微信里面也是好用的，但是浏览器的定位方式不准确，ip定位和sdk定位很准确。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidudingwei</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度的应用开发key"></script>
</head>
<body>
<div id="container"></div>
<script>
// var map = new BMap.Map("container"); // 创建地图实例
// var point = new BMap.Point(116.404, 39.915); // 创建点坐标
// map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
console.log(r);
});
function myFun(result){
console.log(result);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
console.log(r);
});
</script>
</body>
</html>在浏览器里面和在微信里面测试的结果是一样的，所以就展示一张图片了。
三、高德地图
<!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">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>获取地图当前行政区</title>
</head>
<body>
<div id="container"></div>
<div class="info">
<h4>当前所在行政区信息</h4>
<p><span id="map-city"></span></p>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=申请的key"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script>
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始地图级别
});
//获取并展示当前城市信息
function logMapinfo(){
map.getCity( function(info){
console.log(info);
var node = new PrettyJSON.view.Node({
el: document.querySelector("#map-city"),
data: info
});
});
}
logMapinfo();
//绑定地图移动事件
map.on('moveend', logMapinfo);
</script>
</body>
</html>经过测试，是可以定位到省市的，区不是特别准确，有的时候会出现误差，经过测试，高德的api试用于手机浏览器，微信等浏览器，目前发现的定位效果最好的，兼容性效果也很好的。
PS：微信公众号自带的定位方式
最后就是微信公众号的自带定位的方式，16年的时候使用了微信的开发但是远远没有现在开发的复杂，需要有校验的程序，换取token等一系列的身份认证操作，之后才可以调用其中的api，这里我只有个人的公众号，并没有一个企业号，所以在开发的时候，还有很大的局限性，等我把微信这一套弄清楚之后，在写一篇博客，供大家批评指正。
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
