百度地图坐标拾取+覆盖物+逆解析

<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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值