未命名  

檔案下載:39248761

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地圖API演示:查詢百度地圖經緯度</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=3690f5facff0a96fc7ff291c20f532e0&v=1.0&services=true" ></script>
<script type="text/javascript"> 

function MblogDotccMap(keyword){
var map = new BMap.Map("MblogMap");          // 創建地圖實例 
var point = new BMap.Point(119.607568,39.940628);  // 創建點坐標 

map.centerAndZoom(point, 17);                 // 初始化地圖,設置中心點坐標和地圖級別 

//添加縮放控件
map.addControl(new BMap.NavigationControl()); 
map.addControl(new BMap.ScaleControl()); 
map.addControl(new BMap.OverviewMapControl());

/*顯示地圖中心地點的坐標
map.addEventListener("dragend", function(){
  //map.panTo(point);
  var center = map.getCenter();
  document.getElementById("info").innerHTML = "當前地圖中心坐標:" + center.lng + ", " + center.lat;
});*/

//搜索
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "results_info"}});
map.panBy(point);
local.search(keyword);
local.getResults();
local.setSearchCompleteCallback(function(searchResult){
var poi = searchResult.getPoi(0);
//alert(poi.point.lng+"   "+poi.point.lat);
document.getElementById("info1").value = poi.point.lng + "," + poi.point.lat;
});


map.addEventListener("click", function (e) {
var _point = e.point;
document.getElementById("info2").value = _point.lng + "," + _point.lat;

});

}

</script>
</head>
<body onload="MblogDotccMap();" onkeydown="if(event.keyCode==13)MblogDotccMap(document.getElementById('keyword').value)">
<div style="width:600px;height:450px;border:1px solid gray; float:left" id="MblogMap"></div>
<div style="margin-top:10px; margin-left:10px; float:left">
先用搜索查詢出大概位置,然後鼠標點擊想要的具體位置:
<div id="search" style="margin-top:10px; margin-left:10px;">搜索:
<input type="text" size="20" name="keyword" id="keyword" />
<input type="submit" value="提交" onclick="MblogDotccMap(document.getElementById('keyword').value)" />
</div>
<div id="results_info" style="margin-top:10px; margin-left:10px;"></div>
<div id="info" style="margin-top:10px; margin-left:10px;">
搜索地址經緯度:<input type="text" id="info1"/><br/>
鼠標點擊經緯度:<input type="text" id="info2"/>
</div>

</div>
</body>
</html>

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()