map.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. (function () {
  2. var widgetName = 'map';
  3. UM.registerWidget(widgetName, {
  4. tpl: "<style type=\"text/css\">" +
  5. ".edui-dialog-map .edui-map-content{width:530px; height: 350px;margin: 10px auto;}" +
  6. ".edui-dialog-map .edui-map-content table{width: 100%}" +
  7. ".edui-dialog-map .edui-map-content table td{vertical-align: middle;}" +
  8. ".edui-dialog-map .edui-map-button { border: 1px solid #ccc; float: left; cursor: default; height: 23px; width: 70px; cursor: pointer; margin: 0; font-size: 12px; line-height: 24px; text-align: center; }" +
  9. ".edui-dialog-map .edui-map-button:hover {background:#eee;}" +
  10. ".edui-dialog-map .edui-map-city,.edui-dialog-map .edui-map-address{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}" +
  11. ".edui-dialog-map .edui-map-city{width:90px}" +
  12. ".edui-dialog-map .edui-map-address{width:150px}" +
  13. ".edui-dialog-map .edui-map-dynamic-label span{vertical-align:middle;margin: 3px 0px 3px 3px;}" +
  14. ".edui-dialog-map .edui-map-dynamic-label input{vertical-align:middle;margin: 3px;}" +
  15. "</style>" +
  16. "<div class=\"edui-map-content\">" +
  17. "<table>" +
  18. "<tr>" +
  19. "<td><%=lang_city%>:</td>" +
  20. "<td><input class=\"edui-map-city\" type=\"text\" value=\"<%=city.value%>\"/></td>" +
  21. "<td><%=lang_address%>:</td>" +
  22. "<td><input class=\"edui-map-address\" type=\"text\" value=\"\" /></td>" +
  23. "<td><a class=\"edui-map-button\"><%=lang_search%></a></td>" +
  24. "<td><label class=\"edui-map-dynamic-label\"><input class=\"edui-map-dynamic\" type=\"checkbox\" name=\"edui-map-dynamic\" /><span><%=lang_dynamicmap%></span></label></td>"+
  25. "</tr>" +
  26. "</table>" +
  27. "<div style=\"width:100%;height:340px;margin:5px auto;border:1px solid gray\" class=\"edui-map-container\"></div>" +
  28. "</div>" +
  29. "<script class=\"edui-tpl-container\" type=\"text/plain\">" +
  30. "<!DOCTYPE html>" +
  31. "<html>" +
  32. "<head>" +
  33. "<title></title>" +
  34. "</head>" +
  35. "<body>" +
  36. "<scr_ipt>" +
  37. "window.onload = function(){" +
  38. "var scripts = document.scripts || document.getElementsByTagName(\"script\")," +
  39. "src = [];" +
  40. "for( var i = 1, len = scripts.length; i<len; i++ ) {" +
  41. "src.push( scripts[i].src );" +
  42. "}" +
  43. "parent.UM.getEditor(<<id>>).getWidgetData(\'map\').requestMapApi( src );" +
  44. "};" +
  45. "function mapReadyStateChange ( state ) { " +
  46. " if ( state === 'complete' || state === 'loaded' ) {" +
  47. " document.close(); " +
  48. " } }" +
  49. "</scr_ipt>" +
  50. "<scr_ipt onreadystatechange='mapReadyStateChange(this.readyState);' onload='mapReadyStateChange(\"loaded\");' src=\"http://api.map.baidu.com/api?v=2.0&ak=6b6c1a67eaa7db1ca6d6da28e590e343&services=true\"></scr_ipt>" +
  51. "</body>" +
  52. "</html>" +
  53. "</script>",
  54. initContent: function (editor, $widget) {
  55. var me = this,
  56. lang = editor.getLang(widgetName),
  57. theme_url = editor.options.themePath + editor.options.theme;
  58. if( me.inited ) {
  59. me.preventDefault();
  60. return false;
  61. }
  62. me.inited = true;
  63. me.lang = lang;
  64. me.editor = editor;
  65. me.root().html($.parseTmpl(me.tpl, $.extend({}, lang['static'], {
  66. 'theme_url': theme_url
  67. })));
  68. me.initRequestApi();
  69. },
  70. /**
  71. * 初始化请求API
  72. */
  73. initRequestApi: function () {
  74. var $ifr = null;
  75. //已经初始化过, 不用再次初始化
  76. if (window.BMap && window.BMap.Map) {
  77. this.initBaiduMap();
  78. } else {
  79. $ifr = $('<iframe style="display: none;"></iframe>');
  80. $ifr.appendTo( this.root() );
  81. $ifr = $ifr[ 0 ].contentWindow.document;
  82. $ifr.open();
  83. $ifr.write( this.root().find(".edui-tpl-container").html().replace( /scr_ipt/g, 'script').replace('<<id>>',"'" + this.editor.id + "'") );
  84. }
  85. },
  86. requestMapApi: function (src) {
  87. var me = this;
  88. if (src.length) {
  89. var _src = src[0];
  90. src = src.slice(1);
  91. if (_src) {
  92. $.getScript(_src, function () {
  93. me.requestMapApi(src);
  94. });
  95. } else {
  96. me.requestMapApi(src);
  97. }
  98. } else {
  99. me.initBaiduMap();
  100. }
  101. },
  102. initBaiduMap: function () {
  103. var $root = this.root(),
  104. map = new BMap.Map($root.find(".edui-map-container")[0]),
  105. me = this,
  106. marker,
  107. point,
  108. imgcss,
  109. img = $(me.editor.selection.getRange().getClosedNode());
  110. map.enableInertialDragging();
  111. map.enableScrollWheelZoom();
  112. map.enableContinuousZoom();
  113. if (img.length && /api[.]map[.]baidu[.]com/ig.test(img.attr("src"))) {
  114. var url = img.attr("src"),
  115. centerPos = me.getPars(url, "center").split(","),
  116. markerPos = me.getPars(url, "markers").split(",");
  117. point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]));
  118. marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
  119. map.addControl(new BMap.NavigationControl());
  120. map.centerAndZoom(point, Number(me.getPars(url, "zoom")));
  121. imgcss = img.attr('style');
  122. } else {
  123. point = new BMap.Point(116.404, 39.915); // 创建点坐标
  124. marker = new BMap.Marker(point);
  125. map.addControl(new BMap.NavigationControl());
  126. map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
  127. }
  128. marker.enableDragging();
  129. map.addOverlay(marker);
  130. me.map = map;
  131. me.marker = marker;
  132. me.imgcss = imgcss;
  133. },
  134. doSearch: function () {
  135. var me = this,
  136. city = me.root().find('.edui-map-city').val(),
  137. address = me.root().find('.edui-map-address').val();
  138. if (!city) {
  139. alert(me.lang.cityMsg);
  140. return;
  141. }
  142. var search = new BMap.LocalSearch(city, {
  143. onSearchComplete: function (results) {
  144. if (results && results.getNumPois()) {
  145. var points = [];
  146. for (var i = 0; i < results.getCurrentNumPois(); i++) {
  147. points.push(results.getPoi(i).point);
  148. }
  149. if (points.length > 1) {
  150. me.map.setViewport(points);
  151. } else {
  152. me.map.centerAndZoom(points[0], 13);
  153. }
  154. point = me.map.getCenter();
  155. me.marker.setPoint(point);
  156. } else {
  157. alert(me.lang.errorMsg);
  158. }
  159. }
  160. });
  161. search.search(address || city);
  162. },
  163. getPars: function (str, par) {
  164. var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
  165. return reg.exec(str)[1];
  166. },
  167. reset: function(){
  168. this.map && this.map.reset();
  169. },
  170. initEvent: function () {
  171. var me = this,
  172. $root = me.root();
  173. $root.find('.edui-map-address').on('keydown', function (evt) {
  174. evt = evt || event;
  175. if (evt.keyCode == 13) {
  176. me.doSearch();
  177. return false;
  178. }
  179. });
  180. $root.find(".edui-map-button").on('click', function (evt) {
  181. me.doSearch();
  182. });
  183. $root.find(".edui-map-address").focus();
  184. $root.on( "mousewheel DOMMouseScroll", function ( e ) {
  185. return false;
  186. } );
  187. },
  188. width: 580,
  189. height: 408,
  190. buttons: {
  191. ok: {
  192. exec: function (editor) {
  193. var widget = editor.getWidgetData(widgetName),
  194. center = widget.map.getCenter(),
  195. zoom = widget.map.getZoom(),
  196. size = widget.map.getSize(),
  197. point = widget.marker.P;
  198. if (widget.root().find(".edui-map-dynamic")[0].checked) {
  199. var URL = editor.getOpt('UMEDITOR_HOME_URL'),
  200. url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/map.html" +
  201. '#center=' + center.lng + ',' + center.lat,
  202. '&zoom=' + zoom,
  203. '&width=' + size.width,
  204. '&height=' + size.height,
  205. '&markers=' + point.lng + ',' + point.lat].join('');
  206. editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '" frameborder="0" width="' + (size.width+4) + '" height="' + (size.height+4) + '"></iframe>');
  207. } else {
  208. url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
  209. "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
  210. editor.execCommand('inserthtml', '<img width="' + size.width + '"height="' + size.height + '" src="' + url + '"' + (widget.imgcss ? ' style="' + widget.imgcss + '"' : '') + '/>', true);
  211. }
  212. widget.reset();
  213. }
  214. },
  215. cancel: {
  216. exec: function(editor){
  217. editor.getWidgetData(widgetName).reset();
  218. }
  219. }
  220. }
  221. });
  222. })();