map.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /*******************************************************************************
  2. * KindEditor - WYSIWYG HTML Editor for Internet
  3. * Copyright (C) 2006-2011 kindsoft.net
  4. *
  5. * @author Roddy <luolonghao@gmail.com>
  6. * @site http://www.kindsoft.net/
  7. * @licence http://www.kindsoft.net/license.php
  8. *******************************************************************************/
  9. // Google Maps: http://code.google.com/apis/maps/index.html
  10. KindEditor.plugin('map', function(K) {
  11. var self = this, name = 'map', lang = self.lang(name + '.');
  12. self.clickToolbar(name, function() {
  13. var html = ['<div style="padding:10px 20px;">',
  14. '<div class="ke-dialog-row">',
  15. lang.address + ' <input id="kindeditor_plugin_map_address" name="address" class="ke-input-text" value="" style="width:200px;" /> ',
  16. '<span class="ke-button-common ke-button-outer">',
  17. '<input type="button" name="searchBtn" class="ke-button-common ke-button" value="' + lang.search + '" />',
  18. '</span>',
  19. '</div>',
  20. '<div class="ke-map" style="width:558px;height:360px;"></div>',
  21. '</div>'].join('');
  22. var dialog = self.createDialog({
  23. name : name,
  24. width : 600,
  25. title : self.lang(name),
  26. body : html,
  27. yesBtn : {
  28. name : self.lang('yes'),
  29. click : function(e) {
  30. var geocoder = win.geocoder,
  31. map = win.map,
  32. center = map.getCenter().lat() + ',' + map.getCenter().lng(),
  33. zoom = map.getZoom(),
  34. maptype = map.getMapTypeId(),
  35. url = 'http://maps.googleapis.com/maps/api/staticmap';
  36. url += '?center=' + encodeURIComponent(center);
  37. url += '&zoom=' + encodeURIComponent(zoom);
  38. url += '&size=558x360';
  39. url += '&maptype=' + encodeURIComponent(maptype);
  40. url += '&markers=' + encodeURIComponent(center);
  41. url += '&language=' + self.langType;
  42. url += '&sensor=false';
  43. self.exec('insertimage', url).hideDialog().focus();
  44. }
  45. },
  46. beforeRemove : function() {
  47. searchBtn.remove();
  48. if (doc) {
  49. doc.write('');
  50. }
  51. iframe.remove();
  52. }
  53. });
  54. var div = dialog.div,
  55. addressBox = K('[name="address"]', div),
  56. searchBtn = K('[name="searchBtn"]', div),
  57. win, doc;
  58. var iframeHtml = ['<!doctype html><html><head>',
  59. '<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />',
  60. '<style>',
  61. ' html { height: 100% }',
  62. ' body { height: 100%; margin: 0; padding: 0; background-color: #FFF }',
  63. ' #map_canvas { height: 100% }',
  64. '</style>',
  65. '<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=' + self.langType + '"></script>',
  66. '<script>',
  67. 'var map, geocoder;',
  68. 'function initialize() {',
  69. ' var latlng = new google.maps.LatLng(31.230393, 121.473704);',
  70. ' var options = {',
  71. ' zoom: 11,',
  72. ' center: latlng,',
  73. ' disableDefaultUI: true,',
  74. ' panControl: true,',
  75. ' zoomControl: true,',
  76. ' mapTypeControl: true,',
  77. ' scaleControl: true,',
  78. ' streetViewControl: false,',
  79. ' overviewMapControl: true,',
  80. ' mapTypeId: google.maps.MapTypeId.ROADMAP',
  81. ' };',
  82. ' map = new google.maps.Map(document.getElementById("map_canvas"), options);',
  83. ' geocoder = new google.maps.Geocoder();',
  84. ' geocoder.geocode({latLng: latlng}, function(results, status) {',
  85. ' if (status == google.maps.GeocoderStatus.OK) {',
  86. ' if (results[3]) {',
  87. ' parent.document.getElementById("kindeditor_plugin_map_address").value = results[3].formatted_address;',
  88. ' }',
  89. ' }',
  90. ' });',
  91. '}',
  92. 'function search(address) {',
  93. ' if (!map) return;',
  94. ' geocoder.geocode({address : address}, function(results, status) {',
  95. ' if (status == google.maps.GeocoderStatus.OK) {',
  96. ' map.setZoom(11);',
  97. ' map.setCenter(results[0].geometry.location);',
  98. ' var marker = new google.maps.Marker({',
  99. ' map: map,',
  100. ' position: results[0].geometry.location',
  101. ' });',
  102. ' } else {',
  103. ' alert("Invalid address: " + address);',
  104. ' }',
  105. ' });',
  106. '}',
  107. '</script>',
  108. '</head>',
  109. '<body onload="initialize();">',
  110. '<div id="map_canvas" style="width:100%; height:100%"></div>',
  111. '</body></html>'].join('\n');
  112. // TODO:用doc.write(iframeHtml)方式加载时,在IE6上第一次加载报错,暂时使用src方式
  113. var iframe = K('<iframe class="ke-textarea" frameborder="0" src="' + self.pluginsPath + 'map/map.html" style="width:558px;height:360px;"></iframe>');
  114. function ready() {
  115. win = iframe[0].contentWindow;
  116. doc = K.iframeDoc(iframe);
  117. //doc.open();
  118. //doc.write(iframeHtml);
  119. //doc.close();
  120. }
  121. iframe.bind('load', function() {
  122. iframe.unbind('load');
  123. if (K.IE) {
  124. ready();
  125. } else {
  126. setTimeout(ready, 0);
  127. }
  128. });
  129. K('.ke-map', div).replaceWith(iframe);
  130. // search map
  131. searchBtn.click(function() {
  132. win.search(addressBox.val());
  133. });
  134. });
  135. });