984aca5bc78b070e59f34e230f11cf6d
http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
<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:"微软雅黑";font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图单击事件</title>
</head>
<body>
<div id="allmap"></div>
<p>添加点击地图监听事件，点击地图后显示当前经纬度</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
</script>
<div class="fitem">
<div class="ftitle">场馆地址<span class="bi">*</span></div>
<input name="stadium_address" type="text" class="text" size="30" />
</div>
<div class="fitem">
<div class="ftitle">地理位置经度<span class="bi">*</span></div>
<input name="longitude" id="longitude" type="text" class="text" size="30" />
</div>
<div class="fitem">
<div class="ftitle">地理位置纬度<span class="bi">*</span></div>
<input name="latitude" id="latitude" type="text" class="text" size="30" />
</div>
<div class="fitem">
<input name="map_search" id="map_search" type="text" class="text" size="30" />
<input name="search" id="search" type="button" value="搜" />
<div id="allmap"></div>
</div>
//百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(114.068, 22.5469), 13);
$("#search").click(function(){
var place=$('#map_search').val();
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search(place);
});
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
function showInfo(e){
document.getElementById("longitude").value=e.point.lng;
document.getElementById("latitude").value=e.point.lat;
//map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)));
map.clearOverlays();
var new_point = new BMap.Point(e.point.lng,e.point.lat);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
//alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
//百度地图API功能
(function () {
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(114.068, 22.5469), 13);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//添加事件
map.addEventListener("click", function (e) {
document.getElementById("longitude").value = e.point.lng;
document.getElementById("latitude").value = e.point.lat;
map.clearOverlays();
var new_point = new BMap.Point(e.point.lng, e.point.lat);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
});
function theLocation(){
if(document.getElementById("longitude").value != 0 && document.getElementById("latitude").value != 0)
{
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
theLocation();
})();
浙公网安备 33010602011771号