| 提交 | 用户 | 时间 | ||
| 1ac2bc | 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:60px} | |
| 14 | #address{width:130px} | |
| 15 | #is_dynamic_label span{vertical-align:middle;margin: 3px 0px 3px 3px;} | |
| 16 | #is_dynamic_label input{vertical-align:middle;margin: 3px 3px 3px 50px;} | |
| 17 | </style> | |
| 18 | </head> | |
| 19 | <body> | |
| 20 | <div class="content"> | |
| 21 | <table> | |
| 22 | <tr> | |
| 23 | <td><var id="lang_city"></var>:</td> | |
| 24 | <td><input id="city" type="text" /></td> | |
| 25 | <td><var id="lang_address"></var>:</td> | |
| 26 | <td><input id="address" type="text" value="" /></td> | |
| 27 | <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td> | |
| 28 | <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td> | |
| 29 | </tr> | |
| 30 | </table> | |
| 31 | <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div> | |
| 32 | ||
| 33 | </div> | |
| 34 | <script type="text/javascript"> | |
| 35 | var map = new BMap.Map("container"),marker,point,styleStr; | |
| 36 | map.enableScrollWheelZoom(); | |
| 37 | map.enableContinuousZoom(); | |
| 38 | function doSearch(){ | |
| 39 | if (!document.getElementById('city').value) { | |
| 40 | alert(lang.cityMsg); | |
| 41 | return; | |
| 42 | } | |
| 43 | var search = new BMap.LocalSearch(document.getElementById('city').value, { | |
| 44 | onSearchComplete: function (results){ | |
| 45 | if (results && results.getNumPois()) { | |
| 46 | var points = []; | |
| 47 | for (var i=0; i<results.getCurrentNumPois(); i++) { | |
| 48 | points.push(results.getPoi(i).point); | |
| 49 | } | |
| 50 | if (points.length > 1) { | |
| 51 | map.setViewport(points); | |
| 52 | } else { | |
| 53 | map.centerAndZoom(points[0], 13); | |
| 54 | } | |
| 55 | point = map.getCenter(); | |
| 56 | marker.setPoint(point); | |
| 57 | } else { | |
| 58 | alert(lang.errorMsg); | |
| 59 | } | |
| 60 | } | |
| 61 | }); | |
| 62 | search.search(document.getElementById('address').value || document.getElementById('city').value); | |
| 63 | } | |
| 64 | //获得参数 | |
| 65 | function getPars(str,par){ | |
| 66 | var reg = new RegExp(par+"=((\\d+|[.,])*)","g"); | |
| 67 | return reg.exec(str)[1]; | |
| 68 | } | |
| 69 | function init(){ | |
| 70 | var mapNode = editor.selection.getRange().getClosedNode(), | |
| 71 | isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")), | |
| 72 | isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap'); | |
| 73 | if(isMapImg || isMapIframe){ | |
| 74 | var url, centerPos, markerPos; | |
| 75 | if(isMapIframe) { | |
| 76 | url = decodeURIComponent(mapNode.getAttribute("src")); | |
| 77 | $G('is_dynamic').checked = true; | |
| 78 | styleStr = mapNode.style.cssText; | |
| 79 | } else { | |
| 80 | url = mapNode.getAttribute("src"); | |
| 81 | styleStr = mapNode.style.cssText; | |
| 82 | } | |
| 83 | ||
| 84 | centerPos = getPars(url,"center").split(","); | |
| 85 | markerPos = getPars(url, "markers").split(","); | |
| 86 | point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1])); | |
| 87 | marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1]))); | |
| 88 | map.addControl(new BMap.NavigationControl()); | |
| 89 | map.centerAndZoom(point, Number(getPars(url,"zoom"))); | |
| 90 | }else{ | |
| 91 | point = new BMap.Point(116.404, 39.915); // 创建点坐标 | |
| 92 | marker = new BMap.Marker(point); | |
| 93 | map.addControl(new BMap.NavigationControl()); | |
| 94 | map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。 | |
| 95 | } | |
| 96 | marker.enableDragging(); | |
| 97 | map.addOverlay(marker); | |
| 98 | } | |
| 99 | init(); | |
| 100 | document.getElementById('address').onkeydown = function (evt){ | |
| 101 | evt = evt || event; | |
| 102 | if (evt.keyCode == 13) { | |
| 103 | doSearch(); | |
| 104 | } | |
| 105 | }; | |
| 106 | dialog.onok = function (){ | |
| 107 | var center = map.getCenter(); | |
| 108 | var zoom = map.zoomLevel; | |
| 109 | var size = map.getSize(); | |
| 110 | var mapWidth = size.width; | |
| 111 | var mapHeight = size.height; | |
| 112 | var point = marker.getPoint(); | |
| 113 | ||
| 114 | if($G('is_dynamic').checked) { | |
| 115 | var URL = editor.options.UEDITOR_HOME_URL, | |
| 116 | url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" + | |
| 117 | '#center=' + center.lng + ',' + center.lat, | |
| 118 | '&zoom=' + zoom, | |
| 119 | '&width=' + mapWidth, | |
| 120 | '&height=' + mapHeight, | |
| 121 | '&markers=' + point.lng + ',' + point.lat, | |
| 122 | '&markerStyles=' + 'l,A'].join(''); | |
| 123 | editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>'); | |
| 124 | } else { | |
| 125 | var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat + | |
| 126 | "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat; | |
| 127 | editor.execCommand('inserthtml', '<img width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>'); | |
| 128 | } | |
| 129 | }; | |
| 130 | document.getElementById("address").focus(); | |
| 131 | </script> | |
| 132 | ||
| 133 | ||
| 134 | </body> | |
| 135 | </html> | |
