|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
<!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
|
|
|
<title></title>
|
|
|
<!-- 此处页面标题为空，通常可以设置一个有意义的标题，使其显示在浏览器的标题栏中 -->
|
|
|
<script type="text/javascript" src="../internal.js"></script>
|
|
|
<!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
|
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
|
|
|
<!-- 引入百度地图 API 的 JavaScript 文件，通过指定的版本号（v=1.1）和启用相关服务（services=true）来加载百度地图相关功能，后续可基于此 API 进行地图的展示、操作等功能开发 -->
|
|
|
<style type="text/css">
|
|
|
.content {
|
|
|
width: 530px;
|
|
|
height: 350px;
|
|
|
margin: 10px auto;
|
|
|
}
|
|
|
/* 定义类名为 'content' 的元素样式，设置宽度为 530 像素，高度为 350 像素，外边距上下为 10 像素，左右自动（auto）居中，用于控制包含地图相关元素的容器的整体尺寸和在页面中的位置布局 */
|
|
|
.content table {
|
|
|
width: 100%;
|
|
|
}
|
|
|
/* 针对类名为 'content' 内部的 table 元素，设置宽度为 100%，使其能占满父元素（.content 元素）的宽度，用于表格布局能自适应容器宽度 */
|
|
|
.content table td {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
/* 定义类名为 'content' 内部的 table 表格中 td 单元格的样式，设置垂直对齐方式为居中（vertical-align: middle），使单元格内的内容在垂直方向上居中显示，提升布局美观度 */
|
|
|
#city, #address {
|
|
|
height: 21px;
|
|
|
background: #FFF;
|
|
|
border: 1px solid #d7d7d7;
|
|
|
line-height: 21px;
|
|
|
}
|
|
|
/* 同时为 id 为 'city' 和 'address' 的元素设置样式，设置高度为 21 像素，背景颜色为白色（#FFF），边框为 1 像素宽的浅灰色（#d7d7d7）实线，行高与高度相同（使文本垂直居中），这两个元素可能是用于输入城市和地址信息的输入框，通过统一的样式设置呈现相似的外观风格 */
|
|
|
#city {
|
|
|
width: 60px;
|
|
|
}
|
|
|
/* 单独为 id 为 'city' 的元素设置宽度为 60 像素，用于控制输入城市信息的输入框宽度，使其在表格中占据合适的宽度空间 */
|
|
|
#address {
|
|
|
width: 130px;
|
|
|
}
|
|
|
/* 单独为 id 为 'address' 的元素设置宽度为 130 像素，用于控制输入地址信息的输入框宽度，与其他输入框等元素一起合理布局在表格内 */
|
|
|
#is_dynamic_label span {
|
|
|
vertical-align: middle;
|
|
|
margin: 3px 0px 3px 3px;
|
|
|
}
|
|
|
/* 定义 id 为 'is_dynamic_label' 内部的 span 元素样式，设置垂直对齐方式为居中（vertical-align: middle），并设置上下外边距为 3 像素，左边距为 3 像素，用于控制该 span 元素内文本等内容在垂直方向上居中且与周围元素有合适的间隔距离 */
|
|
|
#is_dynamic_label input {
|
|
|
vertical-align: middle;
|
|
|
margin: 3px 3px 3px 50px;
|
|
|
}
|
|
|
/* 定义 id 为 'is_dynamic_label' 内部的 input 元素（可能是复选框等输入类型）样式，同样设置垂直对齐方式为居中，上下外边距为 3 像素，左边距为 50 像素，使其在布局上与其他相关元素合理排列且垂直居中显示 */
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="content">
|
|
|
<!-- 创建一个类名为 'content' 的 div 容器，其样式按照上面定义的 '.content' 规则进行呈现，作为地图相关功能元素的整体包裹容器，便于对内部元素进行统一的布局管理 -->
|
|
|
<table>
|
|
|
<!-- 在 '.content' 容器内创建一个表格元素，用于以表格形式布局地图搜索相关的输入框、按钮以及复选框等元素 -->
|
|
|
<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>
|
|
|
<!-- 创建表格的一行（tr），该行包含六个单元格（td），具体如下：
|
|
|
- 第一个单元格放置一个带有特定 id 的 var 元素，其文本内容可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与城市相关的提示文本（如“城市：”之类）。
|
|
|
- 第二个单元格放置一个 id 为 'city' 的文本输入框元素，用于用户输入城市信息。
|
|
|
- 第三个单元格放置一个带有特定 id 的 var 元素，文本用于显示与地址相关的提示文本（如“地址：”之类）。
|
|
|
- 第四个单元格放置一个 id 为 'address' 的文本输入框元素，用于用户输入地址信息，初始值为空字符串。
|
|
|
- 第五个单元格放置一个 a 元素，通过设置 href 属性为 "javascript:doSearch()" 将点击事件绑定到名为 'doSearch' 的 JavaScript 函数上，点击该链接可触发地图搜索操作，同时该 a 元素添加了 'button' 类名（样式可能在其他地方定义或者后续通过 JavaScript 操作改变外观等），内部嵌套一个带有特定 id 的 var 元素，文本用于显示与搜索相关的按钮文本（如“搜索”之类）。
|
|
|
- 第六个单元格放置一个 label 元素，通过 'for' 属性关联到后面 id 为 'is_dynamic' 的复选框元素，label 内部包含一个复选框（type="checkbox"，name="is_dynamic"，id="is_dynamic"）用于用户勾选相关选项（可能与地图是否动态显示等相关），以及一个带有特定 id 的 span 元素，其文本通过 JavaScript 动态设置，大概用于显示与动态地图相关的提示文本。
|
|
|
-->
|
|
|
</table>
|
|
|
<div style="width: 100%; height: 340px; margin: 5px auto; border: 1px solid gray" id="container"></div>
|
|
|
<!-- 创建一个 div 元素，通过内联样式设置宽度为 100%（占满父元素宽度），高度为 340 像素，外边距上下为 5 像素且左右自动（auto）居中，边框为 1 像素宽的灰色实线，id 为 'container'，该元素作为百度地图显示的容器，后续会通过 JavaScript 代码将地图实例渲染到这个元素内 -->
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
var map = new BMap.Map("container"), marker, point, styleStr;
|
|
|
// 创建一个百度地图实例（BMap.Map），将其关联到页面中 id 为 'container' 的元素上，也就是把地图渲染到该指定的 DOM 元素内，同时声明变量 marker（后续用于表示地图上的标记点对象）、point（用于表示坐标点对象）和 styleStr（用于存储样式相关的字符串，可能与地图显示样式等有关，后续会根据情况赋值和使用），初始值都为 undefined，它们会在后续的地图操作逻辑中进行相应的赋值和处理。
|
|
|
map.enableScrollWheelZoom();
|
|
|
map.enableContinuousZoom();
|
|
|
// 启用百度地图的鼠标滚轮缩放功能（enableScrollWheelZoom），使用户可以通过滚动鼠标滚轮来放大或缩小地图；同时启用连续缩放功能（enableContinuousZoom），让地图缩放操作更加流畅，提升用户交互体验。
|
|
|
|
|
|
function doSearch() {
|
|
|
if (!document.getElementById('city').value) {
|
|
|
alert(lang.cityMsg);
|
|
|
return;
|
|
|
}
|
|
|
// 定义一个名为 'doSearch' 的函数，用于执行地图搜索操作。在函数内部首先通过 document.getElementById 方法获取页面中 id 为 'city' 的输入框元素，并判断其 value 属性（即用户输入的值）是否为空，如果为空，表示用户没有输入城市信息，则弹出一个提示框（alert），提示内容为 lang.cityMsg（可能是通过语言包获取的提示用户输入城市信息的文本，具体依赖代码中 lang 对象的定义），然后直接返回，阻止后续搜索操作执行，起到输入合法性校验的作用。
|
|
|
|
|
|
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);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
// 创建一个百度地图本地搜索实例（BMap.LocalSearch），传入用户在页面中输入的城市信息（通过 document.getElementById('city').value 获取）作为搜索范围限定，同时传入一个配置对象，在配置对象中定义了 'onSearchComplete' 回调函数，当搜索操作完成后会触发该回调函数。在回调函数内部，首先判断搜索结果（results）是否存在并且搜索到的兴趣点（pois，通过 getNumPois 方法判断数量是否大于 0），如果满足条件，循环遍历搜索到的当前兴趣点数量（results.getCurrentNumPois()），将每个兴趣点对应的坐标点（通过 getPoi(i).point 获取）添加到 points 数组中。然后根据 points 数组的长度进行不同操作，如果数组长度大于 1，表示搜索到多个坐标点，则通过 map.setViewport 方法将地图视野设置为包含所有这些坐标点；如果数组长度为 1，则通过 map.centerAndZoom 方法将地图中心定位到这个唯一的坐标点上，并设置地图缩放级别为 13。最后将地图当前的中心坐标点赋值给 point 变量，并通过 marker.setPoint 方法将地图标记（marker）设置到该坐标点上，用于在地图上显示标记位置。如果搜索结果不满足上述条件（没有搜索到有效的兴趣点），则弹出一个提示框（alert），提示内容为 lang.errorMsg（可能是通过语言包获取的提示搜索出错的文本）。
|
|
|
|
|
|
search.search(document.getElementById('address').value || document.getElementById('city').value);
|
|
|
// 调用刚才创建的百度地图本地搜索实例（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];
|
|
|
}
|
|
|
// 定义一个名为 'getPars' 的函数，用于从给定的字符串（str 参数）中提取指定参数（par 参数）对应的值。函数内部通过创建一个正则表达式对象（RegExp），匹配以指定参数名开头，后面跟着等号以及由数字、小数点或逗号组成的参数值的字符串模式，然后通过 exec 方法执行正则表达式匹配，并返回匹配结果数组中的第二个元素（索引为 1），即提取到的参数值，用于后续解析地图相关 URL 等字符串中特定参数值的操作。
|
|
|
|
|
|
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');
|
|
|
// 定义一个名为 'init' 的函数，在函数内部首先获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()），存储在 mapNode 变量中，该节点可能与地图元素相关（比如地图图片或者包含地图的 iframe 等形式）。然后通过正则表达式判断该节点的'src' 属性值（如果存在）是否包含百度地图 API 的域名（通过 /api[.]map[.]baidu[.]com/ig.test 进行测试），如果满足则将 isMapImg 变量设置为 true，表示当前选区对应的是地图图片元素；同时通过 domUtils.hasClass 函数（可能是自定义的判断元素是否包含特定类名的函数）判断 mapNode 元素是否包含 'ueditor_baidumap' 类名，如果包含则将 isMapIframe 变量设置为 true，表示当前选区对应的是特定类名的 iframe 元素（可能用于嵌入动态地图等情况），这两个变量用于后续根据不同的地图元素类型进行相应的初始化操作判断。
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
// 如果 isMapImg 或者 isMapIframe 为 true，表示当前选区存在与地图相关的元素（图片或 iframe），声明变量 url（用于存储地图元素对应的 URL 地址）、centerPos（用于存储地图中心坐标相关信息）和 markerPos（用于存储地图标记坐标相关信息）。然后根据是否是 iframe 元素进行不同的赋值操作，如果是 iframe 元素（isMapIframe 为 true），先对其'src' 属性值进行 URL 解码（通过 decodeURIComponent 方法）后赋值给 url 变量，将页面中 id 为 'is_dynamic' 的复选框元素设置为选中状态（checked 属性设置为 true，可能表示该地图是动态地图等相关业务逻辑），并将 iframe 元素的样式文本（通过 style.cssText 获取）赋值给 styleStr 变量；如果不是 iframe 元素（即图片元素情况），则直接将其'src' 属性值赋值给 url 变量，并同样将元素的样式文本赋值给 styleStr 变量，用于后续提取地图相关参数以及还原地图样式等操作。
|
|
|
|
|
|
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")));
|
|
|
// 通过之前定义的 'getPars' 函数从 url 中分别提取 'center'（地图中心坐标）和'markers'（地图标记坐标）参数对应的值，并通过逗号分割字符串后存储到 centerPos 和 markerPos 数组中，然后将解析后的中心坐标值创建为百度地图的坐标点对象（通过 BMap.Point 构造函数）赋值给 point 变量，同样将解析后的标记坐标值创建为坐标点对象后用于创建地图标记（通过 BMap.Marker 构造函数创建 marker 对象），接着通过 map.addControl 方法向地图添加导航控件（NavigationControl，方便用户在地图上进行缩放、平移等操作），最后通过 map.centerAndZoom 方法根据解析出的坐标点（point）和缩放级别（通过 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>
|
