您的位置：首页 > Web前端 > JavaScript
百度地图开放API示例整理-基本地图和控件

2014-11-14 16:42 197 查看
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=(String)request.getAttribute("ak")%>"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<title>地图展示</title>
</head>

<body>

<div id="bts">
<button onclick="load()">加载地图</button>
<button onclick="disableScrollWheelZoom()">禁止滚轮缩放</button>
<button onclick="enableScrollWheelZoom()">开启滚轮缩放</button>
<button onclick="disableDragging()">禁止拖拽</button>
<button onclick="enableDragging()">开启拖拽</button>
<button onclick="areaRestriction()">固定区域</button>
<button onclick="panToArea()">移动到区域</button>
<button onclick="getBounds()">获取地图显示范围</button>
<button onclick="getDistance()">获取两点之间距离</button>
<button onclick="add_control()">添加控件和比例尺</button>
<button onclick="delete_control()">移除控件和比例尺</button>
<button onclick="custome_control()">添加自定义控件</button>

</div>
<div id="allmap"></div>
</body>
<script  type="text/javascript">
// 百度地图API功能
//支持异步加载地图 参考Demo http://developer.baidu.com/map/jsdemo.htm#a1_5 //同时加载两个地图 参考Demo http://developer.baidu.com/map/jsdemo.htm#a1_6 （创建两个DOM对象）
var map = new BMap.Map("allmap");    // 创建Map实例
//根据城市名设置地图中心点
map.centerAndZoom("哈尔滨",15);      // 初始化地图,用城市名设置地图中心点

function load(){
//var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别

map.centerAndZoom(new BMap.Point(126.639823,45.767792), 11);  // 初始化地图,设置中心点坐标和地图级别

map.setCurrentCity("哈尔滨");          // 设置地图显示的城市 此项是必须设置的

}
//开启滚轮缩放
function enableScrollWheelZoom(){
map.enableScrollWheelZoom();
}
//禁止滚轮缩放
function disableScrollWheelZoom(){
map.disableScrollWheelZoom();
}
//禁止拖拽
function  disableDragging(){
map.disableDragging();
}
//开启拖拽
function  enableDragging(){
map.enableDragging();
//map.enableInertialDragging();   //两秒后开启惯性拖拽
}
//将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回。 需要AreaRestriction_min.js 支持
function areaRestriction(){

var b = new BMap.Bounds(new BMap.Point(126.623402,45.772721),new BMap.Point(126.655633,45.761681));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
}
}

function panToArea(){
setTimeout(function(){
map.panTo(new BMap.Point(126.560053,45.821232));   //两秒后移动到江北
map.setZoom(14);  // 放大到14级
}, 2000);
}

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

function getDistance(){
//获取两点距离
var pointA = new BMap.Point(126.598986,45.768308);  // 创建点坐标A--大桥南
var pointB = new BMap.Point(126.560305,45.806796);  // 创建点坐标B--大桥北
alert('松花江大桥的直线距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
map.addOverlay(polyline);     //添加折线到地图上

map.panTo(new BMap.Point(126.560305,45.806796));   //两秒后移动到江北
map.setZoom(14);  // 放大到14级
}

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});

// 添加定位控件
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);
});

//添加控件和比例尺
function add_control(){
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
map.addControl(mapType1);
map.addControl(mapType2);
map.addControl(overView);
map.addControl(overViewOpen);
map.addControl(geolocationControl);
}
//移除控件和比例尺
function delete_control(){
map.removeControl(top_left_control);
map.removeControl(top_left_navigation);
map.removeControl(top_right_navigation);
map.removeControl(mapType1);
map.removeControl(mapType2);
map.removeControl(overView);
map.removeControl(overViewOpen);
map.removeControl(geolocationControl);
}

// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}

// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}

function custome_control(){

// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
}
</script>
</html>
要有自己的AK哦。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： jsp 控件百度地图
相关文章推荐
新的分享
章节导航