map.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Baidu Maps</title>
  6. <style>
  7. html {
  8. height: 100%;
  9. }
  10. body {
  11. height: 100%;
  12. margin: 0;
  13. padding: 0;
  14. background-color: #fff;
  15. }
  16. #search_box {
  17. position: fixed;
  18. top: 5px;
  19. right: 5px;
  20. z-index: 9999;
  21. }
  22. #search_box input {
  23. -webkit-appearance: none;
  24. border-radius: 3px;
  25. box-sizing: border-box;
  26. outline: 0;
  27. box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  28. }
  29. #search_box input[type="text"] {
  30. background-color: #fff;
  31. border: 1px solid #ccc;
  32. color: #000;
  33. width: 180px;
  34. padding: 5px;
  35. font-size: 16px;
  36. opacity: 0.7;
  37. box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  38. }
  39. #search_box input[type="button"] {
  40. margin-left: 5px;
  41. background-color: #207ab7;
  42. border: 1px solid #207ab7;
  43. color: #fff;
  44. padding: 4px 6px;
  45. font-size: 14px;
  46. }
  47. </style>
  48. <script charset="utf-8" src="//api.map.baidu.com/api?v=3.0&ak=Hs1n1Yq5UHffCd4gZBtGti60mG3GEkNW"></script>
  49. <script>
  50. var editor = parent.tinymce.activeEditor
  51. function insCnt(txt) {
  52. editor.insertContent(txt)
  53. parent.tinymce.activeEditor.windowManager.close()
  54. }
  55. var map, geocoder
  56. var lng, lat
  57. function initialize() {
  58. map = new BMap.Map('map_canvas')
  59. var point = new BMap.Point(116.331398, 39.897445)
  60. map.centerAndZoom(point, 14)
  61. map.addControl(new BMap.NavigationControl())
  62. // map.enableScrollWheelZoom();
  63. // 根据IP定位
  64. var myCity = new BMap.LocalCity()
  65. myCity.get(function(result) {
  66. map.setCenter(result.name)
  67. lng = result.center.lng
  68. lat = result.center.lat
  69. var marker = new BMap.Marker(new BMap.Point(lng, lat))
  70. map.clearOverlays()
  71. map.addOverlay(marker)
  72. parent.tinymceLng = lng
  73. parent.tinymceLat = lat
  74. })
  75. // 浏览器定位,位置更准确,但需要弹出确定,扰民弃用
  76. /* var gl = new BMap.Geolocation();
  77. gl.getCurrentPosition(function(r){
  78. if(this.getStatus() == BMAP_STATUS_SUCCESS){
  79. var mk = new BMap.Marker(r.point);
  80. map.addOverlay(mk);
  81. map.panTo(r.point);
  82. }else {
  83. //alert('failed'+this.getStatus());
  84. }
  85. },{enableHighAccuracy: true})*/
  86. var gc = new BMap.Geocoder()
  87. gc.getLocation(point, function(rs) {
  88. var addComp = rs.addressComponents
  89. var address = [addComp.city].join('')
  90. // console.log(address);
  91. })
  92. map.addEventListener('click', function(e) {
  93. // alert(e.point.lng + "," + e.point.lat);
  94. lng = e.point.lng
  95. lat = e.point.lat
  96. var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))
  97. map.clearOverlays()
  98. map.addOverlay(marker)
  99. // insCnt(lng+','+lat);
  100. parent.tinymceLng = lng
  101. parent.tinymceLat = lat
  102. })
  103. document.getElementById('kw').addEventListener('keypress', function(e) {
  104. if (e.keyCode == '13') {
  105. e.preventDefault()
  106. searchByStationName()
  107. }
  108. })
  109. }
  110. function searchByStationName() {
  111. var localSearch = new BMap.LocalSearch(map)
  112. // localSearch.enableAutoViewport(); //允许自动调节窗体大小
  113. map.clearOverlays()// 清空原来的标注
  114. var keyword = document.getElementById('kw').value
  115. localSearch.setSearchCompleteCallback(function(searchResult) {
  116. console.log(searchResult)
  117. if (searchResult.Br.length == 0) {
  118. alert('搜索不到该地区')
  119. return false
  120. }
  121. var poi = searchResult.Br[0]
  122. map.centerAndZoom(poi.point, 14)
  123. var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat))
  124. parent.tinymceLng = poi.point.lng
  125. parent.tinymceLat = poi.point.lat
  126. map.addOverlay(marker)
  127. })
  128. localSearch.search(keyword)
  129. return false
  130. }
  131. </script>
  132. </head>
  133. <body onload="initialize();">
  134. <div id="search_box"><input id="kw" type="text" value="" autocomplete="off" placeholder="输入要搜索的地点" /><input
  135. type="button" value="搜索" onclick="searchByStationName()"></div>
  136. <div id="map_canvas" style="width:100%; height:100%"></div>
  137. </body>
  138. </html>