<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>批量地址</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#l-map{height:300px;width:100%;}
#r-result{width:100%; font-size:14px;line-height:20px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">
<input type="button" value="批量地址解析" onclick="bdGEO()" />
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("l-map");
var point = new BMap.Point(116.520591,39.912173);
map.centerAndZoom(point, 13);
var marker = new BMap.Marker(point); // 建立標註
map.addOverlay(marker); // 將標註添加到地圖中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
map.enableScrollWheelZoom(true);
var index = 0;
var myGeo = new BMap.Geocoder();
var adds = [
"團結湖",
"前門 ",
"東單",
"國貿",
"西單",
"十里堡"
];
function bdGEO(){
var add = adds[index];
geocodeSearch(add);
index++;
}
function geocodeSearch(add){
if(index < adds.length){
setTimeout(window.bdGEO,400);
}
myGeo.getPoint(add, function(point){
if (point) {
document.getElementById("result").innerHTML += add + ":" + point.lng + "," + point.lat + "</br>";
var address = new BMap.Point(point.lng, point.lat);
addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(20,-10)}));
}
}, "北京市");
}
// 編寫自定義函數,建立標註
function addMarker(point,label){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
}
</script>javascript
若有BUG或者須要jar包,加我微信!css