最近在研究百度地图JSP API 将之记录下来方便以后查阅
首先调用百度地图API要注册一个百度账号 。
登录后
点击创建应用
创建完成后
查看API 进行开发 或者
查看示例DEMO
因为很多在示例demo里面写好，所以只需要根据自己需要进行改写或者整合就可以了
<!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{
width: 100%;
height: 100%;
}
#allmap {width: 100%;height: 80%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#r-result {width:100%;height：300px;}
#r-result1 {width:100%;height：300px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="创建应用的AK""></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result"></div><div id="r-result1"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(120.750859,31.280026), 17); //以学校为中心
var SchoolPoint = new BMap.Point(120.750859,31.280026);
var HousePoint = new BMap.Point(120.75739,31.275752);
var markerSchool= addMarker(SchoolPoint);
var markerHouse=addMarker(HousePoint);
// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
return marker;
}
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
//
//为学校点设置信息
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:""
}
//学校点点击信息
var infoWindow1 = new BMap.InfoWindow("地址：苏州市吴中区林泉街567号", opts);
markerSchool.addEventListener("click", function(){
map.openInfoWindow(infoWindow1,SchoolPoint); //开启信息窗口
});
//宿舍点点击信息
var infoWindow2 = new BMap.InfoWindow("地址：苏州市姑苏区林泉街370号", opts);
markerHouse.addEventListener("click", function(){
map.openInfoWindow(infoWindow2,HousePoint); //开启信息窗口
});
//逆地址解析
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
//比例尺
map.addControl(new BMap.ScaleControl());
//缩略图
map.addControl(new BMap.OverviewMapControl());
//定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var marker = new BMap.Marker(r.point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中 ，跳动的点
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
else {
alert('failed'+this.getStatus());
}
});
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠右下角位置
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
/*//添加行政区划
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("苏州市吴中区", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
});
}
setTimeout(function(){
getBoundary();
}, 2000);
*/
/*//查询公交，地铁线路
var busline = new BMap.BusLineSearch(map,{
renderOptions:{map:map,panel:"r-result"},
onGetBusListComplete: function(result){
if(result) {
var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
busline.getBusLine(fstLine);
}
}
});
function busSearch(){
var busName = 228;
busline.getBusList(busName);
}*/
//公交换乘
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map}
});
transit.search(SchoolPoint, HousePoint);
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("苏州"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//步行规划
/*var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search(SchoolPoint, HousePoint);*/
//步行规划线路
var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
walking.search(SchoolPoint, HousePoint);
//车规划线路
var transit = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
panel: "r-result1",
enableDragging : true //起终点可进行拖拽
},
});
transit.search(SchoolPoint,HousePoint);
map.enableInertialDragging();
//设置城市列表
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
/* BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角*/
offset: size,
// 切换城市之间事件
// onChangeBefore: function(){
// alert('before');
// },
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
</script>
由于本人晕地图随手写了一点，方便以后查阅，有需要的朋友可以根据API文档或者示例DEMO进行开发；