<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#l-map {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2&ak=2bbe1b8821e6144afdecded45a612407"></script>
<title>显示地图</title>
</head>
<body>
<div id="l-map"></div>
<script type="text/javascript">
function initMap(point){
//初始化地图
var map = new BMap.Map("l-map");
map.addControl(new BMap.ScaleControl()); //左下角比例尺
map.addControl(new BMap.NavigationControl());//电脑版是左上角省市县(手机是右下角加减按钮)
map.addControl(new BMap.GeolocationControl());//左下角定位按钮
map.enableMapClick=false;
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point))
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
initMap(new BMap.Point(crd.longitude,crd.latitude));
console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
</script>
</body>
</html>
直接保存为html文件,不要用浏览器打开本地文件 把文件放到服务器上去然后用电脑和手机访问即可 电脑显示
百度web定位 html5百度地图定位
最新推荐文章于 2024-04-24 16:21:32 发布