首页 > 代码库 > 百度地图开放API示例整理-基本地图和控件
百度地图开放API示例整理-基本地图和控件
<%@ 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哦。。
本文出自 “在路上” 博客，请务必保留此出处http://3409736.blog.51cto.com/3399736/1576577
百度地图开放API示例整理-基本地图和控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。