您的位置：首页 > 其它
怎样引用显示百度地图

2016-04-25 09:49 344 查看
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, user-scalable=no" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<title>HTML5 学习案例</title>

<link rel="stylesheet" href="css/main.css">
<style type="text/css">
html {
height: 100%
}

body {
height: 100%;
margin: 0px;
padding: 0px
}

#allmap {
height: 100%
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=XHDPar7ajC4hcnQZS5DPimj1"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

</head>

<body>
<p id="demo"></p>
<button onclick="getLocationInMap()">地图显示位置</button>
<div id="allmap" style="width:auto;height:100%;border:0px solid gray"></div>

<script>
var x = document.getElementById("demo");

function getLocationInMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPositionInMap,
showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function addMarker(point, index, name) { // 创建图标对象
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
offset : new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset : new BMap.Size(0, 0 - index * 25)
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
icon : myIcon
});
map.addOverlay(marker);
marker.addEventListener("click", showInfo);
marker.stuName = name;
}

function showPositionInMap(position) {
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(position.coords.longitude,
position.coords.latitude);

map.centerAndZoom(point, 10);
map.enableScrollWheelZoom();

var b = new Array();
b[0] = new BMap.Point(position.coords.longitude - 0.00001,
position.coords.latitude - 0.00001);
b[1] = new BMap.Point(position.coords.longitude + 0.00001,
position.coords.latitude + 0.00001);

map.setViewport(b);

//alert("设置地图可视范围是：" + b[0].lng + "," + b[0].lat + "到" + b[1].lng
//		+ "," + b[1].lat);

// 将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回
//var bs = new BMap.Bounds(b[0], b[1]);
//try {
//	BMapLib.AreaRestriction.setBounds(map, bs);
//} catch (e) {
//	alert(e);
//}

//获取地图显示范围
bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng
+ "," + bsne.lat);

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

function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户不同意地理定位请求.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "无法获取位置信息.";
break;
case error.TIMEOUT:
x.innerHTML = "获取位置信息请求超时.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "发生未知错误.";
break;
}
}
</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航