百度地图获取经纬度 

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 5     <style type="text/css">
 6         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
 7     </style>
 8     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图key密匙"></script>
 9     <title>单击获取点击的经纬度</title>
10 </head>
11 <body>
12     <div id="allmap" style="width: 500px;height: 500px;"></div>
13     <div>
14        <label>经度</label>
15        <span id="jing_du"></span>
16        <label>纬度</label>
17        <span id="wei_du"></span>
18     </div>
19 </body>
20 
21 <script type="text/javascript">
22     // 百度地图API功能
23     var map = new BMap.Map("allmap");            
24     map.centerAndZoom("襄阳",12); 
25     
26     var point = new BMap.Point(112.244344,32.260929);
27     map.centerAndZoom(point, 15);
28     
29     var marker = new BMap.Marker(point);  // 创建标注
30     map.addOverlay(marker);               // 将标注添加到地图中
31     marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
32     
33     //单击获取点击的经纬度
34     map.addEventListener("click",function(e){
35         var jing_du_value = e.point.lng ;
36         var wei_du_value =  e.point.lat;
37         //alert(e.point.lng + "," + e.point.lat);
38         var jing_du = document.getElementById("jing_du");
39         var wei_du = document.getElementById("wei_du");
40         jing_du.innerHTML= jing_du_value;
41         wei_du.innerHTML= wei_du_value;
42     });
43     
44     
45     //提升框
46     var opts = {
47       width : 200,     // 信息窗口宽度
48       height: 100,     // 信息窗口高度
49       title : "标题" , // 信息窗口标题
50       enableMessage:true,//设置允许信息窗发送短息
51       message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
52     }
53     var infoWindow = new BMap.InfoWindow("地址：湖北襄阳", opts);  // 创建信息窗口对象 
54     marker.addEventListener("click", function(){          
55         map.openInfoWindow(infoWindow,point); //开启信息窗口
56     });
57     
58     // 百度地图API功能
59     map.centerAndZoom(point,8); 
60     setTimeout(function(){
61         map.setZoom(14);   
62     }, 2000);  //2秒后放大到14级
63     map.enableScrollWheelZoom(true);
64 </script>
65 
66 </html>

 

posted @ 2016-06-13 16:34  幸福流浪  阅读(422)  评论(0)    收藏  举报