|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<!-- 这是 HTML 4.01 过渡型的文档类型声明，告知浏览器按照 HTML 4.01 过渡型标准来解析页面内容，并指定对应的 DTD（文档类型定义）文件的 URL -->
|
|
|
<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 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
|
|
|
<style type="text/css">
|
|
|
.content {
|
|
|
width: 530px;
|
|
|
height: 350px;
|
|
|
margin: 10px auto;
|
|
|
}
|
|
|
/* 定义类名为 'content' 的元素样式，设置宽度为 530 像素，高度为 350 像素，并且在水平方向上自动居中（通过 margin: 10px auto 实现），可能作为页面主体内容的一个容器样式 */
|
|
|
.content table {
|
|
|
width: 100%
|
|
|
}
|
|
|
/* 当类名为 'content' 的元素内部包含 table 表格时，设置表格宽度占满父元素（也就是类名为 'content' 的元素）的宽度，使其自适应父元素宽度 */
|
|
|
.content table td {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
/* 对于类名为 'content' 的元素内部表格的单元格（td），设置垂直对齐方式为居中，使单元格内的内容在垂直方向上居中显示 */
|
|
|
#address {
|
|
|
width: 220px;
|
|
|
height: 21px;
|
|
|
background: #FFF;
|
|
|
border: 1px solid #d7d7d7;
|
|
|
line-height: 21px;
|
|
|
}
|
|
|
/* 定义 id 为 'address' 的元素样式，设置宽度为 220 像素，高度为 21 像素，背景颜色为白色（#FFF），边框为 1 像素宽的灰色（#d7d7d7）实线，并且行高设置为与元素高度相同（21 像素），可能用于输入框等文本输入元素的样式设置 */
|
|
|
</style>
|
|
|
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
|
<!-- 引入 Google Maps API 的 JavaScript 文件，用于在页面中实现地图相关的功能，通过设置 sensor=false 表示不使用传感器（比如设备的地理位置传感器等），具体根据应用场景决定是否需要获取设备位置信息 -->
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="content">
|
|
|
<!-- 创建一个类名为 'content' 的 div 容器，应用上面定义的 '.content' 样式类，作为页面中主要内容的包裹容器，里面放置与地图搜索和展示相关的元素 -->
|
|
|
<table>
|
|
|
<tr>
|
|
|
<td><label for="address"><var id="lang_input_address"></var></label></td>
|
|
|
<td><input id="address" type="text" /></td>
|
|
|
<td><a id="doSearch" href="javascript:void(0)" class="button"><var id="lang_input_search"></var></a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- 创建一个表格结构，第一列通过 label 标签关联到后面的文本输入框（input 元素，id 为 'address'），用于显示一个提示文本（<var id="lang_input_address"></var> 中的文本可能通过 JavaScript 动态设置，大概是与输入地址相关的提示语），第二列是用于输入地址信息的文本输入框，第三列是一个链接（a 元素，id 为 'doSearch'，应用 'button' 类样式，显示的文本同样通过 <var id="lang_input_search"></var> 动态设置，大概是与搜索操作相关的按钮文本），整体构成一个简单的地图地址搜索表单 -->
|
|
|
<div id="container" style="width: 100%; height: 340px;margin: 5px auto; border: 1px solid gray;"></div>
|
|
|
<!-- 创建一个 id 为 'container' 的 div 容器，设置宽度占满父元素（也就是类名为 'content' 的元素）的宽度，高度为 340 像素，在水平方向上自动居中（通过 margin: 5px auto 实现），并且有 1 像素宽的灰色边框，该容器用于后续放置 Google 地图展示相关的内容 -->
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
domUtils.on(window, "load", function () {
|
|
|
// 使用 domUtils（可能是自定义的 DOM 操作工具函数库中的方法）为 window 对象绑定 'load' 事件监听器，当页面加载完成后执行以下匿名函数，用于初始化地图相关的各种功能和操作绑定
|
|
|
var map = new google.maps.Map(document.getElementById('container'), {
|
|
|
zoom: 3,
|
|
|
streetViewControl: false,
|
|
|
scaleControl: true,
|
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
|
});
|
|
|
// 创建一个 Google Maps 的地图实例（map），将其渲染到页面中 id 为 'container' 的元素内，设置初始缩放级别为 3，禁用街景视图控制（streetViewControl: false），启用比例尺控制（scaleControl: true），地图类型为普通道路地图（mapTypeId: google.maps.MapTypeId.ROADMAP）
|
|
|
var imgcss;
|
|
|
// 定义一个变量 imgcss，用于存储图片的样式信息，初始值为空，后续可能会根据获取到的已有图片样式进行赋值
|
|
|
var marker = new google.maps.Marker({
|
|
|
map: map,
|
|
|
draggable: true
|
|
|
});
|
|
|
// 创建一个 Google Maps 的标记（marker）实例，将其添加到刚才创建的地图（map）上，并且设置该标记是可拖动的（draggable: true），可用于在地图上标记特定位置
|
|
|
function doSearch() {
|
|
|
var address = document.getElementById('address').value;
|
|
|
// 获取页面中 id 为 'address' 的文本输入框内输入的地址文本内容
|
|
|
var geocoder = new google.maps.Geocoder();
|
|
|
// 创建一个 Google Maps 的地理编码服务对象（geocoder），用于将地址文本转换为地理坐标等相关信息
|
|
|
geocoder.geocode({ 'address': address }, function (results, status) {
|
|
|
// 使用地理编码服务对象的 geocode 方法，传入要查询的地址信息，该方法是异步的，查询完成后会执行回调函数，回调函数接收查询结果（results）和状态码（status）两个参数
|
|
|
if (status == google.maps.GeocoderStatus.OK) {
|
|
|
var bounds = results[0].geometry.viewport;
|
|
|
// 如果查询状态码为 'OK'，表示查询成功，从查询结果的第一个元素（results[0]）中获取地理边界信息（geometry.viewport），用于后续调整地图显示范围
|
|
|
map.fitBounds(bounds);
|
|
|
// 根据获取到的地理边界信息调整地图的显示范围，使地图能够完整显示该地址所在的区域
|
|
|
marker.setPosition(results[0].geometry.location);
|
|
|
// 将标记的位置设置为查询结果中该地址对应的地理坐标位置（geometry.location）
|
|
|
marker.setTitle(address);
|
|
|
// 为标记设置标题为输入的地址文本内容，可能在鼠标悬停等交互场景下显示该标题作为提示信息
|
|
|
} else alert(lang.searchError);
|
|
|
// 如果查询状态码不是 'OK'，表示查询出现错误，弹出一个提示框（alert）显示错误信息（lang.searchError，这里的 lang 可能是一个包含多语言文本的对象，通过相应的键获取对应的错误提示文本，具体看代码其他部分的定义）
|
|
|
});
|
|
|
}
|
|
|
$G('address').onkeydown = function (evt) {
|
|
|
evt = evt || event;
|
|
|
if (evt.keyCode == 13) {
|
|
|
doSearch();
|
|
|
}
|
|
|
};
|
|
|
// 使用 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'address' 的元素，并为其绑定 'keydown' 键盘按下事件监听器，当按下回车键（keyCode == 13）时，调用 doSearch 函数执行地址搜索操作，方便用户通过键盘直接进行搜索，无需点击搜索按钮
|
|
|
$G("doSearch").onclick = doSearch;
|
|
|
// 使用 $G 函数获取页面中 id 为 'doSearch' 的元素（也就是搜索按钮），并为其绑定 'click' 事件监听器，点击按钮时调用 doSearch 函数执行地址搜索操作
|
|
|
dialog.onok = function () {
|
|
|
var center = map.getCenter();
|
|
|
var point = marker.getPosition();
|
|
|
// 获取地图当前的中心坐标（center）以及标记所在的位置坐标（point），用于构建静态地图的 URL 参数
|
|
|
var url = "http://maps.googleapis.com/maps/api/staticmap?center=" + center.lat() + ',' + center.lng() + "&zoom=" + map.zoom + "&size=520x340&maptype=" + map.getMapTypeId() + "&markers=" + point.lat() + ',' + point.lng() + "&sensor=false";
|
|
|
// 构建一个 Google Maps 静态地图的 URL，包含地图的中心坐标、缩放级别、尺寸（宽 520 像素，高 340 像素）、地图类型以及标记位置等参数，并且设置不使用传感器（sensor=false），用于获取一张静态的地图图片资源
|
|
|
editor.execCommand('inserthtml', '<img width="520" height="340" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' : '') + '/>');
|
|
|
// 使用编辑器（editor，可能是自定义的富文本编辑器对象）的命令（execCommand）插入一段 HTML 代码，即创建一个宽度为 520 像素，高度为 340 像素的 img 图片元素，其 src 属性指向刚才构建的静态地图 URL，并且如果 imgcss 变量有值（即存在图片样式信息），则添加相应的 style 属性设置图片样式，将静态地图图片插入到编辑器内容中
|
|
|
};
|
|
|
|
|
|
function getPars(str, par) {
|
|
|
var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
|
|
|
return reg.exec(str)[1];
|
|
|
}
|
|
|
// 定义一个函数 getPars，用于从给定的字符串（str）中通过正则表达式（RegExp）匹配获取指定参数（par）的值，正则表达式的模式是匹配以参数名开头，后面跟着等号和对应的值（值可以是数字、小数点或者逗号组成的字符串），并返回匹配到的参数值
|
|
|
var img = editor.selection.getRange().getClosedNode();
|
|
|
if (img && img.src.indexOf("http://maps.googleapis.com/maps/api/staticmap") != -1) {
|
|
|
var url = img.getAttribute("src");
|
|
|
var centers = getPars(url, "center").split(",");
|
|
|
point = new google.maps.LatLng(Number(centers[0]), Number(centers[1]));
|
|
|
map.setCenter(point);
|
|
|
map.setZoom(Number(getPars(url, "zoom")));
|
|
|
centers = getPars(url, "markers").split(",");
|
|
|
marker.setPosition(new google.maps.LatLng(Number(centers[0]), Number(centers[1])));
|
|
|
imgcss = img.style.cssText;
|
|
|
} else {
|
|
|
setTimeout(function () {
|
|
|
doSearch();
|
|
|
}, 30)
|
|
|
}
|
|
|
// 获取编辑器当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()，可能是获取选区对应的 HTML 元素节点），判断如果该节点存在（img）并且其 src 属性中包含 Google Maps 静态地图的 URL 字符串，则表示当前是在编辑已有的静态地图相关内容，执行以下操作：
|
|
|
// 从该节点的 src 属性获取 URL 字符串（img.getAttribute("src")），通过 getPars 函数分别获取地图的中心坐标、缩放级别以及标记位置等参数信息，然后根据这些信息设置地图（map）的中心坐标、缩放级别以及标记（marker）的位置，并且获取该节点的样式信息（img.style.cssText）赋值给 imgcss 变量，用于后续保存或应用该图片的样式；
|
|
|
// 如果获取的节点不存在或者不是 Google Maps 静态地图相关的节点，则设置一个定时器，延迟 30 毫秒后调用 doSearch 函数执行地址搜索操作，可能是在初次加载页面或者新建相关内容时的默认操作，引导用户输入地址进行地图查询和展示。
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
