鼠标点击获取百度地图的经度与纬度(可直接嵌入到项目中)

最新推荐文章于 2024-03-11 18:21:38 发布

cs_19_dn

最新推荐文章于 2024-03-11 18:21:38 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/cs_19_dn/article/details/53287789

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>bdMap.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=你的秘钥&amp;services=&amp;t=20140114135006"></script>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<style type="text/css">
			body,h2{margin:0;padding:0;}
			#faqdiv2{position:absolute;width:400px;right:10%;top:10%;height:500px;z-index:100;background-color:#fff;border:1px #0067a5 solid;padding:1px;}
			#faqdiv2 h2{height:25px;font-size:14px;background-color:#0067a5;position:relative;padding-left:10px;line-height:25px;}
			#faqdiv2 h2 {color:#fff}
			#faqdiv2 h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
			#l-map{height:95%;width:100%;}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			$(function(){
				$(".addclass").click(function(){
					var yscroll =document.documentElement.scrollTop;
					$("#faqdiv2").css("display","block");
					document.documentElement.scrollTop=0;
				});
				$(".close").click(function(){
					$("#faqdiv2").css("display","none");
				});
			})
		</script>
	
		<a class="addclass"  href="#"><img src="http://www.baidu.com/img/bdlogo.gif"></a>
		经度:<input id="r-result1">纬度:<input id="r-result2">
	
		<div id="faqdiv2" style="display: none;">
			<h2>选取坐标<a class="close" href="#">关闭</a></h2>
			<div id="l-map">
				
			</div>
		</div>
				<script type="text/javascript">
					var map = new BMap.Map("l-map");
					map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
					map.enableScrollWheelZoom();                            //启用滚轮放大缩小
					map.addEventListener("click", function(e){
						//alert("X:"+e.point.lng+"Y:"+e.point.lat);
						$('#r-result1').val(e.point.lng);
						$('#r-result2').val(e.point.lat);
					});
				</script>
	</body>
</html>