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=" 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>
支付宝扫一扫
微信扫一扫
