map.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript" src="../internal.js"></script>
  7. <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.3&services=true&s=1"></script> -->
  8. <style type="text/css">
  9. .content {
  10. width: 600px;
  11. height: 415px;
  12. margin: 20px;
  13. }
  14. .content table {
  15. width: 100%
  16. }
  17. .content table td {
  18. vertical-align: middle;
  19. }
  20. #city,
  21. #address {
  22. height: 26px;
  23. background: #FFF;
  24. border: 1px solid #ccc;
  25. line-height: 26px;
  26. border-radius: 5px;
  27. margin-left: 5px;
  28. }
  29. #city {
  30. width: 76px
  31. }
  32. #address {
  33. width: 178px
  34. }
  35. #is_dynamic_label span {
  36. vertical-align: middle;
  37. margin: 3px 0px 3px 3px;
  38. }
  39. #is_dynamic_label input {
  40. vertical-align: middle;
  41. margin: 3px 3px 3px 3px;
  42. }
  43. /* #search {
  44. display: block;
  45. text-align: center;
  46. line-height: 30px;
  47. text-decoration: none;
  48. height: 30px;
  49. width: 78px;
  50. border: 0;
  51. color: #838383;
  52. background-color: #3498db;
  53. border-radius: 5px;
  54. color: #fff;
  55. } */
  56. </style>
  57. </head>
  58. <body>
  59. <div class="content">
  60. <table>
  61. <tr>
  62. <td><var id="lang_city"></var>:</td>
  63. <td><input id="city" type="text" /></td>
  64. <td><var id="lang_address"></var>:</td>
  65. <td><input id="address" type="text" value="" /></td>
  66. <td><a href="javascript:doSearch()" class="button" id="search"><var id="lang_search"></var></a></td>
  67. <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox"
  68. name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>
  69. </tr>
  70. </table>
  71. <div style="width:100%;height:363px;margin:20px auto;border:none" id="container"></div>
  72. </div>
  73. <script type="text/javascript">
  74. var map, marker, point, styleStr;
  75. function loadScript() {
  76. var script = document.createElement("script");
  77. var ak = editor.options.baiduMapAk
  78. script.src = "https://api.map.baidu.com/api?v=3.0&ak=" + ak + "&callback=initialize";
  79. document.body.appendChild(script);
  80. }
  81. window.onload = loadScript;
  82. function doSearch() {
  83. if (!document.getElementById('city').value) {
  84. alert(lang.cityMsg);
  85. return;
  86. }
  87. var search = new BMap.LocalSearch(document.getElementById('city').value, {
  88. onSearchComplete: function (results) {
  89. if (results && results.getNumPois()) {
  90. var points = [];
  91. for (var i = 0; i < results.getCurrentNumPois(); i++) {
  92. points.push(results.getPoi(i).point);
  93. }
  94. if (points.length > 1) {
  95. map.setViewport(points);
  96. } else {
  97. map.centerAndZoom(points[0], 13);
  98. }
  99. point = map.getCenter();
  100. marker.setPosition(point);
  101. } else {
  102. alert(lang.errorMsg);
  103. }
  104. }
  105. });
  106. search.search(document.getElementById('address').value || document.getElementById('city').value);
  107. }
  108. //获得参数
  109. function getPars(str, par) {
  110. var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
  111. return reg.exec(str)[1];
  112. }
  113. function init() {
  114. var mapNode = editor.selection.getRange().getClosedNode(),
  115. isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),
  116. isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
  117. if (isMapImg || isMapIframe) {
  118. var url, centerPos, markerPos;
  119. if (isMapIframe) {
  120. url = decodeURIComponent(mapNode.getAttribute("src"));
  121. $G('is_dynamic').checked = true;
  122. styleStr = mapNode.style.cssText;
  123. } else {
  124. url = mapNode.getAttribute("src");
  125. styleStr = mapNode.style.cssText;
  126. }
  127. centerPos = getPars(url, "center").split(",");
  128. markerPos = getPars(url, "mMarkerarkers").split(",");
  129. point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]));
  130. marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
  131. map.addControl(new BMap.NavigationControl());
  132. map.centerAndZoom(point, Number(getPars(url, "zoom")));
  133. } else {
  134. point = new BMap.Point(116.404, 39.915); // 创建点坐标
  135. marker = new BMap.Marker(point);
  136. map.addControl(new BMap.NavigationControl());
  137. map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
  138. }
  139. marker.enableDragging();
  140. map.addOverlay(marker);
  141. }
  142. document.getElementById('address').onkeydown = function (evt) {
  143. evt = evt || event;
  144. if (evt.keyCode == 13) {
  145. doSearch();
  146. }
  147. };
  148. dialog.onok = function () {
  149. var center = map.getCenter();
  150. // var zoom = map.zoomLevel;
  151. var zoom = map.getZoom();
  152. var size = map.getSize();
  153. var mapWidth = size.width;
  154. var mapHeight = size.height;
  155. var point = marker.getPosition();
  156. if ($G('is_dynamic').checked) {
  157. var URL = editor.options.UEDITOR_HOME_URL,
  158. url = [URL + (/\/$/.test(URL) ? '' : '/') + "dialogs/map/show.html" +
  159. '#center=' + center.lng + ',' + center.lat,
  160. '&zoom=' + zoom,
  161. '&width=' + mapWidth,
  162. '&height=' + mapHeight,
  163. '&markers=' + point.lng + ',' + point.lat,
  164. '&markerStyles=' + 'l,A'].join('');
  165. editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + ' frameborder="0" width="' + (mapWidth + 4) + '" height="' + (mapHeight + 4) + '"></iframe>');
  166. } else {
  167. var url = "https://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
  168. "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
  169. editor.execCommand('inserthtml', '<img width="' + size.width + '" height="' + size.height + '" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + '/>');
  170. }
  171. };
  172. document.getElementById("address").focus();
  173. function initialize() {
  174. map = new BMap.Map("container");
  175. map.enableScrollWheelZoom();
  176. map.enableContinuousZoom();
  177. init();
  178. }
  179. </script>
  180. </body>
  181. </html>