分享一下地圖上的地點搜索和鼠標點擊獲取地點經緯度,這些都是地圖比較基本和實用的代碼,其中還包括了根據用戶IP進行地圖的顯示、改變地圖上的鼠標樣式、啟用滾輪縮放等,算是半入門吧,其他的一些可以自己參考百度的地圖API

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地圖API地點搜索-獲取經緯度DEMO</title>
<meta name="description" content="百度地圖地點搜索和鼠標點擊地點獲取經緯度,這些都是地圖比較基本和實用的代碼,其中還包括了根據用戶IP進行地圖的顯示、改變地圖上的鼠標樣式、啟用滾輪縮放" />
<meta name="keywords" content="百度地圖,地點搜索,獲取經緯度,改變地圖鼠標樣式,啟用滾輪縮放" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<form action="" method="get">
<label >地點:</label>
<input id="where" name="where" type="text" >
<input type="button" value="地圖上找" onClick="sear(document.getElementById('where').value);" />
<br />
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<br />
經緯度:
<input id="lonlat" name="lonlat" type="text">
</form>
<script type="text/javascript">
var map = new BMap.Map("container");//在指定的容器內創建地圖實例
map.setDefaultCursor("crosshair");//設置地圖默認的鼠標指針樣式
map.enableScrollWheelZoom();//啟用滾輪放大縮小,默認禁用。
map.centerAndZoom(new BMap.Point(116.124878, 24.309178), 13);
map.addControl(new BMap.NavigationControl());
map.addEventListener("click", function(e){//地圖單擊事件
document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat;
});
function iploac(result){//根據IP設置地圖中心
var cityName = result.name;
map.setCenter(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(iploac);
function sear(result){//地圖搜索
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(result);
}
</script>
<h2 >教程:<a href="http://blog.yourtion.com/baidu-maps-search-get-lonlat.html" title="百度地圖API地點搜索-獲取經緯度">百度地圖API地點搜索-獲取經緯度</a></h2>
<h3>輸入地點然后點擊“地圖上找”搜索,點擊地圖地點獲取相應經緯度</h3>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12599330-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
