123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <script type="text/javascript" src="../internal.js"></script>
- <script type="text/javascript"
- src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
- <style type="text/css">
- .content {
- width: 530px;
- height: 350px;
- margin: 10px auto;
- }
- .content table {
- width: 100%
- }
- .content table td {
- vertical-align: middle;
- }
- #city, #address {
- height: 21px;
- background: #FFF;
- border: 1px solid #d7d7d7;
- line-height: 21px;
- }
- #city {
- width: 60px
- }
- #address {
- width: 130px
- }
- #is_dynamic_label span {
- vertical-align: middle;
- margin: 3px 0px 3px 3px;
- }
- #is_dynamic_label input {
- vertical-align: middle;
- margin: 3px 3px 3px 50px;
- }
- </style>
- </head>
- <body>
- <div class="content">
- <table>
- <tr>
- <td><var id="lang_city"></var>:</td>
- <td><input id="city" type="text" /></td>
- <td><var id="lang_address"></var>:</td>
- <td><input id="address" type="text" value="" /></td>
- <td><a href="javascript:doSearch()" class="button"><var
- id="lang_search"></var></a></td>
- <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>
- </tr>
- </table>
- <div
- style="width: 100%; height: 340px; margin: 5px auto; border: 1px solid gray"
- id="container"></div>
- </div>
- <script type="text/javascript">
- var map = new BMap.Map("container"),marker,point,styleStr;
- map.enableScrollWheelZoom();
- map.enableContinuousZoom();
- function doSearch(){
- if (!document.getElementById('city').value) {
- alert(lang.cityMsg);
- return;
- }
- var search = new BMap.LocalSearch(document.getElementById('city').value, {
- onSearchComplete: function (results){
- if (results && results.getNumPois()) {
- var points = [];
- for (var i=0; i<results.getCurrentNumPois(); i++) {
- points.push(results.getPoi(i).point);
- }
- if (points.length > 1) {
- map.setViewport(points);
- } else {
- map.centerAndZoom(points[0], 13);
- }
- point = map.getCenter();
- marker.setPoint(point);
- } else {
- alert(lang.errorMsg);
- }
- }
- });
- search.search(document.getElementById('address').value || document.getElementById('city').value);
- }
- //获得参数
- function getPars(str,par){
- var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
- return reg.exec(str)[1];
- }
- function init(){
- var mapNode = editor.selection.getRange().getClosedNode(),
- isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),
- isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
- if(isMapImg || isMapIframe){
- var url, centerPos, markerPos;
- if(isMapIframe) {
- url = decodeURIComponent(mapNode.getAttribute("src"));
- $G('is_dynamic').checked = true;
- styleStr = mapNode.style.cssText;
- } else {
- url = mapNode.getAttribute("src");
- styleStr = mapNode.style.cssText;
- }
- centerPos = getPars(url,"center").split(",");
- markerPos = getPars(url, "markers").split(",");
- point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1]));
- marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
- map.addControl(new BMap.NavigationControl());
- map.centerAndZoom(point, Number(getPars(url,"zoom")));
- }else{
- point = new BMap.Point(116.404, 39.915); // 创建点坐标
- marker = new BMap.Marker(point);
- map.addControl(new BMap.NavigationControl());
- map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
- }
- marker.enableDragging();
- map.addOverlay(marker);
- }
- init();
- document.getElementById('address').onkeydown = function (evt){
- evt = evt || event;
- if (evt.keyCode == 13) {
- doSearch();
- }
- };
- dialog.onok = function (){
- var center = map.getCenter();
- var zoom = map.zoomLevel;
- var size = map.getSize();
- var mapWidth = size.width;
- var mapHeight = size.height;
- var point = marker.getPoint();
- if($G('is_dynamic').checked) {
- var URL = editor.options.UEDITOR_HOME_URL,
- url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +
- '#center=' + center.lng + ',' + center.lat,
- '&zoom=' + zoom,
- '&width=' + mapWidth,
- '&height=' + mapHeight,
- '&markers=' + point.lng + ',' + point.lat,
- '&markerStyles=' + 'l,A'].join('');
- editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>');
- } else {
- var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
- "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
- editor.execCommand('inserthtml', '<img width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>');
- }
- };
- document.getElementById("address").focus();
- </script>
- </body>
- </html>
|