百度地图javascript api实现定位

最新推荐文章于 2024-07-08 16:22:29 发布

xin3336019

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量371

点赞数

分类专栏： html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xin3336019/article/details/84428022

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

百度地图API： http://api.map.baidu.com/lbsapi/cloud/
开发前需要先申请密钥（key)

在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。

经过测试发现，目前的浏览器定位技术依然不靠谱，误差很大，基本没有实用性。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8704bb2733e7bbfd5fbd7ddb73861d87"></script>
<title>地图官网展示效果</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>

<script type="text/javascript">

var map = new BMap.Map("allmap"); // 创建Map实例
var enableBaiduLocation = false; //暂时不用百度自带的浏览器定位接口

if(enableBaiduLocation) {
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,15);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
} else {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction, {
enableHighAcuracy: true,
timeout: 5000
});
} else {
alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}
}

function successFunction(position) {
var latitude = position.coords.latitude; //维度
var longitude = position.coords.longitude; //经度
var curPoint = new BMap.Point(longitude, latitude);
map.centerAndZoom(curPoint, 15); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("成都"); // 设置地图显示的城市此项是必须设置的

var marker1 = new BMap.Marker(curPoint); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中

map.addEventListener("click",function(e){
alert("点击坐标：" + e.point.lng + "," + e.point.lat);
});
}

function errorFunction() {
alert("error");
}
</script>

xin3336019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图javascript api实现定位

百度地图API： http://api.map.baidu.com/lbsapi/cloud/开发前需要先申请密钥（key)在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您...
复制链接

扫一扫