<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple Map</title>
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=GOcS8HmhMtSzqmo1ooIwpNK0&v=2.0&services=false"></script>
</head>
<body>
<div id="content" class="content">
<input type="text" value="" id="keyword" />
<input type="button" name="" id="" value="查詢" onclick="search()" />
<div style="width:600px;height:500px;border:0px solid gray" id="container"></div>
<p id="aa"></p>
<form action="index.php" method="get">
<p>經度: <input type="text" id="jd" name="ji" /></p>
<p>緯度: <input type="text" id="wd" name="wi"/></p>
<p><input type="submit" value="确定" /></p>
</form>
<script type="text/javascript">
//建立Map執行個體
var map = new BMap.Map("container");
var point = new BMap.Point(118.060576,36.842432);
map.centerAndZoom(point,15);
//添加滑鼠滾動縮放
map.enableScrollWheelZoom();
//添加縮略圖控件
map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
//添加縮放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//添加地圖類型控件
//map.addControl(new BMap.MapTypeControl());
//設定标注的圖示
var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));
//設定标注的經緯度
var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});
//把标注添加到地圖上
map.addOverlay(marker);
var content = "<table>";
content = content + "<tr><td> 編号:001</td></tr>";
content = content + "<tr><td> 地點:淄博市張店區</td></tr>";
content = content + "<tr><td> 時間:2014-09-26</td></tr>";
content += "</table>";
var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("click",function(){
this.openInfoWindow(infowindow);
});
//點選地圖,擷取經緯度坐标
map.addEventListener("click",function(e){
document.getElementById("jd").value = e.point.lng;
document.getElementById("wd").value = e.point.lat;
document.getElementById("aa").innerHTML = "經度坐标:"+e.point.lng+" 緯度坐标:"+e.point.lat;
});
//關鍵字搜尋
function search(){
var keyword = document.getElementById("keyword").value;
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(keyword);
}
</script>
</div>
</body>
</html>
點選地圖擷取目前的經緯度