map.html 4.3 KB

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