<!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&ak=你的秘钥&services=&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> 