<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jKaZX2RsTYAxYuq5wf2lCv6GaQfzYyin"></script>
</head>
<style>
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<body>
<div id="allmap"></div>
</body>
<script>
//h5 谷歌的方案
function GetLocation() {
//判断浏览器是否含有navigator对象geolocation属性
if(navigator.geolocation) {
//如果浏览器支持geolocation的话我们调用getCurrentPosition一个方法
navigator.geolocation.getCurrentPosition(
//如果我们能从googleApi里面拿到定位信息我们就可以得到定位信息
function(position) {
//经纬度
console.log(position.coords.longitude);
console.log(position.coords.latitude);
},
//如果我们拿不到就返回错误信息
function(error) {
//百度方案
console.log(error);
//创建一个地图对象，并把地图渲染到id为allmap的标签元素上
var map = new BMap.Map("allmap");
//var point = new BMap.Point(116.331398, 39.897445);
//map.centerAndZoom(point, 12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(
//百度地图调用成功的回调
function(r) {
console.log(this);//输出geolocation对象
console.log(this.getStatus()); //输出现在的状态码
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var mark = new BMap.Marker(r.point); //打一个红点
map.addOverlay(mark); //加标记到地图中
map.panTo(r.point); //把标记移到对应的坐标
//r.point 包含lat和long的坐标点
} else {
alert("状态值出错");
}
},
//失败的回调
function(error) {
}
)
});
}
}
GetLocation();
</script>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent