map.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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="http://api.map.baidu.com/api?v=1.1&services=true"></script>
  8. <style type="text/css">
  9. .content {
  10. width: 530px;
  11. height: 350px;
  12. margin: 10px auto;
  13. }
  14. .content table {
  15. width: 100%
  16. }
  17. .content table td {
  18. vertical-align: middle;
  19. }
  20. #city, #address {
  21. height: 21px;
  22. background: #FFF;
  23. border: 1px solid #d7d7d7;
  24. line-height: 21px;
  25. }
  26. #city {
  27. width: 90px
  28. }
  29. #address {
  30. width: 220px
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="content">
  36. <table>
  37. <tr>
  38. <td><var id="lang_city"></var>:</td>
  39. <td><input id="city" type="text"/></td>
  40. <td><var id="lang_address"></var>:</td>
  41. <td><input id="address" type="text" value=""/></td>
  42. <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>
  43. </tr>
  44. </table>
  45. <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>
  46. </div>
  47. <script type="text/javascript">
  48. var map = new BMap.Map("container"), marker, point, imgcss;
  49. map.enableScrollWheelZoom();
  50. map.enableContinuousZoom();
  51. function doSearch() {
  52. if (!document.getElementById('city').value) {
  53. alert(lang.cityMsg);
  54. return;
  55. }
  56. var search = new BMap.LocalSearch(document.getElementById('city').value, {
  57. onSearchComplete: function (results) {
  58. if (results && results.getNumPois()) {
  59. var points = [];
  60. for (var i = 0; i < results.getCurrentNumPois(); i++) {
  61. points.push(results.getPoi(i).point);
  62. }
  63. if (points.length > 1) {
  64. map.setViewport(points);
  65. } else {
  66. map.centerAndZoom(points[0], 13);
  67. }
  68. point = map.getCenter();
  69. marker.setPoint(point);
  70. } else {
  71. alert(lang.errorMsg);
  72. }
  73. }
  74. });
  75. search.search(document.getElementById('address').value || document.getElementById('city').value);
  76. }
  77. //获得参数
  78. function getPars(str, par) {
  79. var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
  80. return reg.exec(str)[1];
  81. }
  82. function init() {
  83. var img = editor.selection.getRange().getClosedNode();
  84. if (img && /api[.]map[.]baidu[.]com/ig.test(img.getAttribute("src"))) {
  85. var url = img.getAttribute("src"), centers;
  86. centers = getPars(url, "center").split(",");
  87. point = new BMap.Point(Number(centers[0]), Number(centers[1]));
  88. map.addControl(new BMap.NavigationControl());
  89. map.centerAndZoom(point, Number(getPars(url, "zoom")));
  90. imgcss = img.style.cssText;
  91. } else {
  92. point = new BMap.Point(116.404, 39.915); // 创建点坐标
  93. map.addControl(new BMap.NavigationControl());
  94. map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
  95. }
  96. marker = new BMap.Marker(point);
  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.zoomLevel;
  110. var size = map.getSize();
  111. var point = marker.getPoint();
  112. var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
  113. "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
  114. editor.execCommand('inserthtml', '<img width="' + size.width + '"height="' + size.height + '" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' : '') + '/>');
  115. };
  116. document.getElementById("address").focus();
  117. </script>
  118. </body>
  119. </html>