<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mzGfyhryZXRDC81ITnI6Pr20flEL1D1M"></script>
</head>
<body>
<div>
<div>
<div>位置</div>
<div>
<input id="address" type="text"/>
</div>
</div>
<div style="height: 400px;width:730px;margin:auto;">
<div id="container"
style="
width: 730px;
height: 400px;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
<div>
<div>经度</div>
<div>
<input id="longitude" type="text" placeholder="经度"/>
</div>
</div>
<div>
<div>纬度</div>
<div>
<input id="latitude" type="text" placeholder="纬度"/>
</div>
</div>
</form>
</div>
</div>
<script>
//map中的container必须与div中id保持一致
var map = new BMap.Map("container");
map.centerAndZoom("昆明",12);
//逆地址解析（将经纬度转化为地址）
var geoc = new BMap.Geocoder();
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//添加单击事件
map.addEventListener("click",function(e){
map.clearOverlays();//清空原来的标注
document.getElementById("longitude").value = e.point.lng;
document.getElementById("latitude").value = e.point.lat;
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
geoc.getLocation(e.point,function(rs){
var addComp = rs.addressComponents;
document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mzGfyhryZXRDC81ITnI6Pr20flEL1D1M"></script>
</head>
<body>
<div>
<div>
<div>位置</div>
<div>
<input id="address" type="text"/>
</div>
</div>
<div style="height: 400px;width:730px;margin:auto;">
<div id="container"
style="
width: 730px;
height: 400px;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
<div>
<div>经度</div>
<div>
<input id="longitude" type="text" placeholder="经度"/>
</div>
</div>
<div>
<div>纬度</div>
<div>
<input id="latitude" type="text" placeholder="纬度"/>
</div>
</div>
</form>
</div>
</div>
<script>
//map中的container必须与div中id保持一致
var map = new BMap.Map("container");
map.centerAndZoom("昆明",12);
//逆地址解析（将经纬度转化为地址）
var geoc = new BMap.Geocoder();
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//添加单击事件
map.addEventListener("click",function(e){
map.clearOverlays();//清空原来的标注
document.getElementById("longitude").value = e.point.lng;
document.getElementById("latitude").value = e.point.lat;
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
geoc.getLocation(e.point,function(rs){
var addComp = rs.addressComponents;
document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
</script>
</body>
</html>
1138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
