📄 正在查看：twcms/plugin/editor_um/umeditor/dialogs/map/map.js
1(function () {
2
3 var widgetName = 'map';
4
5 UM.registerWidget(widgetName, {
6
7 tpl: "<style type=\"text/css\">" +
8 ".edui-map-content{width:530px; height: 350px;margin: 10px auto;}" +
9 ".edui-map-content table{width: 100%}" +
10 ".edui-map-content table td{vertical-align: middle;}" +
11 ".edui-map-button { float: left; cursor: default; height: 24px; width: 96px; margin: 0 10px; background-image: url(\"<%=theme_url%>/images/icons-all.gif\") ; background-position:0 0; font-size: 12px; line-height: 24px; text-align: center; }" +
12 ".edui-map-button:hover {background-position:0 -30px;}" +
13 "#eduiMapCity,#eduiMapAddress{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}" +
14 "#eduiMapCity{width:90px}" +
15 "#eduiMapAddress{width:220px}" +
16 "</style>" +
17 "<div class=\"edui-map-content\">" +
18 "<table>" +
19 "<tr>" +
20 "<td><%=lang_city%>:</td>" +
21 "<td><input id=\"eduiMapCity\" type=\"text\" value=\"<%=city.value%>\"/></td>" +
22 "<td><%=lang_address%>:</td>" +
23 "<td><input id=\"eduiMapAddress\" type=\"text\" value=\"\" /></td>" +
24 "<td><a id=\"eduiMapSearchBtn\" class=\"edui-map-button\"><%=lang_search%></a></td>" +
25 "</tr>" +
26 "</table>" +
27 "<div style=\"width:100%;height:340px;margin:5px auto;border:1px solid gray\" id=\"eduiMapContainer\"></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=1.1&services=true\"></scr_ipt>" +
51 "</body>" +
52 "</html>" +
53 "</script>",
54 initContent: function (editor, $widget) {
55
56 var me = this,
57 lang = editor.getLang(widgetName),
58 theme_url = editor.options.themePath + editor.options.theme;
59
60 if( me.inited ) {
61 me.preventDefault();
62 return false;
63 }
64
65 me.inited = true;
66
67 me.lang = lang;
68 me.editor = editor;
69
70 me.root().html($.parseTmpl(me.tpl, $.extend({}, lang['static'], {
71 'theme_url': theme_url
72 })));
73
74 me.initRequestApi();
75
76 },
77 /**
78 * 初始化请求API
79 */
80 initRequestApi: function () {
81
82 var $ifr = null;
83
84 //已经初始化过， 不用再次初始化
85 if (window.BMap && window.BMap.Map) {
86 this.initBaiduMap();
87 } else {
88
89 $ifr = $('<iframe style="display: none;"></iframe>');
90 $ifr.appendTo( this.root() );
91
92 $ifr = $ifr[ 0 ].contentWindow.document;
93
94 $ifr.open();
95 $ifr.write( this.root().find(".edui-tpl-container").html().replace( /scr_ipt/g, 'script').replace('<<id>>',"'" + this.editor.id + "'") );
96
97 }
98
99 },
100 requestMapApi: function (src) {
101
102 var me = this;
103
104 if (src.length) {
105
106 var _src = src[0];
107
108 src = src.slice(1);
109
110 if (_src) {
111 $.getScript(_src, function () {
112 me.requestMapApi(src);
113 });
114 } else {
115 me.requestMapApi(src);
116 }
117
118 } else {
119
120 me.initBaiduMap();
121
122 }
123
124
125 },
126 initBaiduMap: function () {
127
128 var map = new BMap.Map($("#eduiMapContainer")[0]),
129 me = this,
130 marker,
131 point,
132 imgcss,
133 img = $(me.editor.selection.getRange().getClosedNode());
134
135 map.enableInertialDragging();
136 map.enableScrollWheelZoom();
137 map.enableContinuousZoom();
138
139 if (img.length && /api[.]map[.]baidu[.]com/ig.test(img.attr("src"))) {
140 var url = img.attr("src"),
141 centerPos = me.getPars(url, "center").split(","),
142 markerPos = me.getPars(url, "markers").split(",");
143 point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]));
144 marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
145 map.addControl(new BMap.NavigationControl());
146 map.centerAndZoom(point, Number(me.getPars(url, "zoom")));
147 imgcss = img.attr('style');
148 } else {
149 point = new BMap.Point(116.404, 39.915); // 创建点坐标
150 marker = new BMap.Marker(point);
151 map.addControl(new BMap.NavigationControl());
152 map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
153 }
154 marker.enableDragging();
155 map.addOverlay(marker);
156
157 me.map = map;
158 me.marker = marker;
159 me.imgcss = imgcss;
160 },
161 doSearch: function () {
162 var me = this,
163 city = $('#eduiMapCity').val(),
164 address = $('#eduiMapAddress').val();
165
166 if (!city) {
167 alert(me.lang.cityMsg);
168 return;
169 }
170 var search = new BMap.LocalSearch(city, {
171 onSearchComplete: function (results) {
172 if (results && results.getNumPois()) {
173 var points = [];
174 for (var i = 0; i < results.getCurrentNumPois(); i++) {
175 points.push(results.getPoi(i).point);
176 }
177 if (points.length > 1) {
178 me.map.setViewport(points);
179 } else {
180 me.map.centerAndZoom(points[0], 13);
181 }
182 point = me.map.getCenter();
183 me.marker.setPoint(point);
184 } else {
185 alert(me.lang.errorMsg);
186 }
187 }
188 });
189 search.search(address || city);
190 },
191 getPars: function (str, par) {
192 var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
193 return reg.exec(str)[1];
194 },
195 reset: function(){
196 this.map && this.map.reset();
197 },
198 initEvent: function () {
199 var me = this;
200
201 $('#eduiMapAddress').on('keydown', function (evt) {
202 evt = evt || event;
203 if (evt.keyCode == 13) {
204 me.doSearch();
205 return false;
206 }
207 });
208
209 $("#eduiMapSearchBtn").on('click', function (evt) {
210 me.doSearch();
211 });
212
213 $("#eduiMapAddress").focus();
214
215 me.root().on( "mousewheel DOMMouseScroll", function ( e ) {
216 return false;
217 } );
218
219 },
220 width: 580,
221 height: 408,
222 buttons: {
223 ok: {
224 exec: function (editor) {
225 var widget = editor.getWidgetData(widgetName),
226 center = widget.map.getCenter(),
227 zoom = widget.map.zoomLevel,
228 size = widget.map.getSize(),
229 point = widget.marker.getPoint(),
230 url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
231 "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
232
233 editor.execCommand('inserthtml', '<img width="' + size.width + '"height="' + size.height + '" src="' + url + '"' + (widget.imgcss ? ' style="' + widget.imgcss + '"' : '') + '/>', true);
234 widget.reset();
235 }
236 },
237 cancel: {
238 exec: function(editor){
239 editor.getWidgetData(widgetName).reset();
240 }
241 }
242 }
243 });
244
245})();
246
247