最近领导让在系统中添加题图功能,整理的小例子,密钥申请是在百度地图开放平台:http://lbsyun.baidu.com/
<%@ 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 {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
#allmap {height: 500px;width: 100%;}
#r-result {width: 100%;font-size: 14px;}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<title>城市地图</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
经度: <input id="longitude" type="text"
style="width: 100px; margin-right: 10px;" /> 纬度: <input
id="latitude" type="text" style="width: 100px; margin-right: 10px;" />
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.658069, 34.747239);//创建点坐标
map.centerAndZoom(point, 16);//初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
// 用经纬度设置地图中心点
function theLocation() {
if (document.getElementById("longitude").value != ""
&& document.getElementById("latitude").value != "") {
map.clearOverlays();
var new_point = new BMap.Point(
document.getElementById("longitude").value, document
.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker);
map.panTo(new_point);
}
}
//解析地址
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);
});
});
//右键功能,放大缩小
var menu = new BMap.ContextMenu();//添加右键菜单
var txtMenuItem = [ {
text : '放大',
callback : function() {
map.zoomIn()
}
}, {
text : '缩小',
callback : function() {
map.zoomOut()
}
} ];
for ( var i = 0; i < txtMenuItem.length; i++) {
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,
txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);
</script>