getCoordinate.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6. <title>选择位置</title>
  7. <style type="text/css">
  8. body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  9. p{margin-left:5px; font-size:14px;}
  10. </style>
  11. <link rel="stylesheet" href="${contextPath}/css/bootstrap/bootstrap.min.css">
  12. </head>
  13. <body >
  14. <div style="width: 100%; height: 100%; position:fixed; margin: 0px; padding: 0px; " >
  15. <div id="allmap" style="width: 100%; height: 100%; position:fixed; margin: 0px; padding: 0px; "></div>
  16. <div class="" style="position: absolute; top: 20px; left: 20px; background-color: white; " >
  17. <button id="okButton" onclick="getCoordinate();" disabled="disabled">确定选择</button>
  18. </div>
  19. </div>
  20. <script src="${contextPath}/js/jquery.min.js" type="text/javascript"></script>
  21. <script src="${contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
  22. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hBMSWzhG6vGdgnwa2Y6LwkFXjkGu0lpr"></script>
  23. <script type="text/javascript">
  24. var lng = 0;
  25. var lat = 0;
  26. // 百度地图API功能
  27. var map = new BMap.Map("allmap", {enableMapClick:false});// 创建Map实例
  28. var point = new BMap.Point(125.296419,43.833421);
  29. map.setMapStyle({style:'googlelite'});
  30. map.centerAndZoom(point,13);
  31. function myFun(result){
  32. var cityName = result.name;
  33. map.setCenter(cityName);
  34. }
  35. var myCity = new BMap.LocalCity();
  36. myCity.get(myFun);
  37. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  38. /*
  39. var geolocation = new BMap.Geolocation();
  40. geolocation.getCurrentPosition(function(r){
  41. if(this.getStatus() == BMAP_STATUS_SUCCESS){
  42. map.clearOverlays();
  43. var mk = new BMap.Marker(r.point);
  44. map.addOverlay(mk);
  45. map.panTo(r.point);
  46. lng = r.point.lng;
  47. lat = r.point.lat;
  48. $('#okButton').attr('disabled',false);
  49. }
  50. else {
  51. alert('failed'+this.getStatus());
  52. }
  53. },{enableHighAccuracy: true})
  54. */
  55. //单击获取点击的经纬度
  56. map.addEventListener("click",function(e){
  57. lng = e.point.lng;
  58. lat = e.point.lat;
  59. map.clearOverlays();
  60. var marker = new BMap.Marker(e.point); // 创建点
  61. map.addOverlay(marker); //增加点
  62. $('#okButton').attr('disabled',false);
  63. });
  64. function getCoordinate(){
  65. if(confirm("您确定选择当前坐标么?")){
  66. window.opener.setCoordinate(lng, lat);
  67. window.close();
  68. }
  69. }
  70. </script>
  71. </body>
  72. </html>