2016-03-17:
百度地图API申请key的步骤相对简单，不做过多阐述。
初次使用百度地图API感觉有点神奇，有些功能加进来以后有点问题，注释掉等有空再解决。
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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%;
margin: 0;
font-family: "微软雅黑";
} #allmap {
width: 100%;
height: 100%;
} p {
margin-left: 5px;
font-size: 14px;
} #result {
width: 100%;
font-size: 12px;
} dl,dt,dd,ul,li {
margin: 0;
padding: 0;
list-style: none;
} dt {
font-size: 14px;
font-family: "微软雅黑";
font-weight: bold;
border-bottom: 1px dotted #000;
padding: 5px 0 5px 5px;
margin: 5px 0;
} dd {
padding: 5px 0 0 5px;
} li {
line-height: 28px;
} #l-map {
height: 300px;
width: 100%;
} #r-result {
width: 100%;
}
</style> <script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的API密匙"></script> //密匙申请步骤比较容易，所以不做过多解释~加密后：aUQyZ3d0R2ZvMXA5OGxQZW5pZFV5eDho
<script type="text/javascript"
src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <title>宝宝的地图</title>
</head>
<body>
<div id="allmap"></div>
<div id="l-map"></div>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html> <!-- 异步加载 -->
<script type="text/javascript">
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=iD2gwtGfo1p98lPenidUyx8h&callback=init";
document.body.appendChild(script);
}
window.onload = loadJScript; //异步加载地图
alert("异步成功开启");
</script> <!-- 导航控件-->
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(113.275, 23.117), 11);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 // 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor : BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
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); alert("导航控件开启");
</script> <!-- 城市选择栏-->
<script type="text/javascript">
map.enableInertialDragging();
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor : BMAP_ANCHOR_TOP_RIGHT,
offset : size, })); var city = document.getElementById("cityName").value;
if(city != ""){
map.centerAndZoom(city,11); // 用城市名设置地图中心点
}
alert("城市选择栏控件开启");
</script> <!-- 路况面板-->
<script type="text/javascript">
// 百度地图API功能
var ctrl = new BMapLib.TrafficControl({
showPanel: false //是否显示路况提示面板
});
map.addControl(ctrl);
ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
alert("路况控件开启");
</script> <!-- 点击获取坐标 -->
<script type="text/javascript">
/*map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});*/
</script> <!-- 检索控件-->
<script type="text/javascript"> //检索地图
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = " "+" "+" "+" ";
//创建检索信息窗口对象
var searchInfoWindow = null;
var marker;
marker.enableDragging(); //marker可拖拽
map.addOverlay(marker); //在地图中添加marker
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
alert("检索控件开启"); </script> <!-- 右键菜单控件-->
<script type="text/javascript">
/*
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.275, 23.117);
map.centerAndZoom(point,15);
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> <!-- 右键菜单删除标注控件-->
<script type="text/javascript">
/*
var removeMarker = function(e,ee,marker)
{
map.removeOverlay(marker);
} //创建右键菜单
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
var marker = new BMap.Marker(poi);
map.addOverlay(marker);
marker.addContextMenu(markerMenu);
*/
</script> <!-- 智能搜索控件-->
<script type="text/javascript">
/*// 百度地图API功能
function G(id) {
return document.getElementById(id);
} //var map = new BMap.Map("allmap");
//map.centerAndZoom(new BMap.Point(113.275, 23.117),11); // 初始化地图,设置城市和地图级别。 var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "suggestId"
,"location" : map
}); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
}); var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace();
}); function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}*/
</script>