<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%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap{width: 600px; height: 450px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的KEY"></script>
<title>IP定位获取当前城市</title>
</head>
<body>
<div id="allmap"></div>
<input type="text" name="map" id="map" />
<input type="text" name="addr" id="addr" />
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder();
var customeCity = new BMap.LocalCity();
var cityName = '';
var marker = new BMap.Marker(116.331398,39.897445);
function setXappCenter(result){
cityName = result.name;
map.setCenter(cityName);
map.centerAndZoom(cityName,13);
}
// 百度地图API功能
customeCity.get(setXappCenter);
map.addEventListener("click", function(e){
map.clearOverlays();
var point = new BMap.Point(e.point.lng,e.point.lat);
marker.setPosition(point);
map.addOverlay(marker);
marker.enableDragging();
document.getElementById("map").value = e.point.lng+","+e.point.lat;
getAddr(e.point.lng,e.point.lat)
});
marker.addEventListener("dragend",function(e){
document.getElementById("map").value = e.point.lng+","+e.point.lat;
getAddr(e.point.lng,e.point.lat)
});
function getAddr(lng,lat){
var point = new BMap.Point(lng,lat);
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
document.getElementById("addr").value = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
});
}
</script>
百度地图坐标拾取+覆盖物+逆解析
最新推荐文章于 2024-08-01 07:40:42 发布