map.html 5.8 KB

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