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