Geen omschrijving
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

map.html 6.0KB

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