<!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">
.map {
width: 100%;
height: 500px;
float: left;
overflow: hidden;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<title>地圖DEMO</title>
</head>
<body>
<div id="allmap" class="map"></div>
</body>
</html>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=8BaH1arvq7rizUO9dFHT03cu0ODORMr2"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript">
var map = new BMap.Map('allmap');
//通過座標設置中心點
//var point=new BMap.Point(116.404, 39.915);
// map.centerAndZoom(point, 11);
//通過城市名稱設置中心點
map.centerAndZoom("北京", 11);
//開啓鼠標滾輪縮放
map.enableScrollWheelZoom(true);
//禁止拖拽
//map.disableDragging();
//將地圖顯示範圍設定在指定區域，地圖拖出該區域後會重新彈回。
/*
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
}
*/
//添加定位功能
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
});
map.addControl(navigationControl);
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function (e) {
var address = "";
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("當前定位地址爲：" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
alert(e.message);
});
map.addControl(geolocationControl);
//2秒後移動到廣州
/*
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345));
//放大到14級
map.setZoom(12);
//允許拖拽
map.enableDragging();
}, 3000);
*/
</script>
基於百度在線地圖的demo
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章