|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括不同语言文字以及特殊符号等 -->
|
|
|
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
|
|
|
<!-- 设置页面的关键词（keywords）元数据，用于搜索引擎优化（SEO），当用户在搜索引擎中搜索这些关键词时，有助于本页面被搜索到，这里列举了与百度地图及相关功能的一些关键词 -->
|
|
|
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
|
|
|
<!-- 设置页面的描述（description）元数据，同样用于 SEO，简要介绍了页面的主要功能是利用百度地图 API 来实现自定义地图，方便用户通过可视化方式生成地图 -->
|
|
|
<title>百度地图API自定义地图</title>
|
|
|
<!-- 设置页面的标题，会显示在浏览器的标题栏中，清晰表明了页面是用于百度地图 API 自定义地图相关操作的 -->
|
|
|
<!--引用百度地图API-->
|
|
|
<style type="text/css">
|
|
|
html, body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
/* 对 html 和 body 元素设置样式，将外边距（margin）和内边距（padding）都设置为 0，去除默认的空白间隔，使页面布局从最外层开始更紧凑；同时将溢出（overflow）属性设置为 'hidden'，意味着超出页面可视范围的内容将被隐藏，常用于避免出现滚动条或者控制元素显示范围等情况，这里可能是为了让地图在特定容器内更好地展示，避免出现不必要的滚动条等布局问题 */
|
|
|
</style>
|
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
|
|
|
<!-- 引入百度地图 API 的 JavaScript 文件，通过指定的版本号（v=1.1）以及启用相关服务（services=true）来加载百度地图功能相关的代码库，后续可以基于这个 API 进行地图的创建、操作以及各种交互功能的实现，不过这里 'key' 的值为空，实际应用中可能需要填入合法的 API 密钥来使用完整功能 -->
|
|
|
</head>
|
|
|
|
|
|
<body onload="initMap();">
|
|
|
<!-- 为 body 元素绑定 onload 事件，当页面加载完成时，会自动执行名为 'initMap' 的 JavaScript 函数，该函数用于初始化地图相关的各种设置和操作，实现地图在页面上的加载与展示 -->
|
|
|
<!--百度地图容器-->
|
|
|
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
|
|
|
<!-- 创建一个 div 元素，通过内联样式设置其宽度为 697 像素，高度为 550 像素，边框为 1 像素宽的浅灰色（#ccc）实线，并且赋予其 'dituContent' 的 id，这个 div 元素作为百度地图展示的容器，后续 JavaScript 代码会将创建的地图实例渲染到这个元素内部 -->
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
function getParam(name) {
|
|
|
return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
|
|
|
}
|
|
|
// 定义一个名为 'getParam' 的函数，用于从当前页面的 URL 地址（location.href）中获取指定参数的值。函数内部通过创建一个正则表达式对象（RegExp），该正则表达式用于匹配 URL 中以 '?'、'#' 或 '&' 开头，紧接着是要查找的参数名（name 参数传入），然后是等号以及参数值（由非 '?'、'#' 和 '&' 组成的字符串）的模式，并且不区分大小写（'i' 修饰符）。接着使用 match 方法在 URL 中进行匹配，如果匹配成功，返回的结果数组中第一个元素（索引为 0）是完整匹配的字符串，第二个元素（索引为 1）就是提取到的参数值，通过返回 RegExp.$1 来获取该参数值；如果匹配失败，则返回空字符串，这样就可以方便地从 URL 中提取诸如地图的中心坐标、缩放级别等各种参数信息，用于后续地图初始化等操作。
|
|
|
|
|
|
var map, marker;
|
|
|
// 声明两个变量，map 用于存储后续创建的百度地图实例对象，marker 用于存储地图上的标注（比如标记点等）对象，初始值都为 undefined，会在后续相应的函数中进行实例化和赋值操作。
|
|
|
|
|
|
var centerParam = getParam('center');
|
|
|
var zoomParam = getParam('zoom');
|
|
|
var widthParam = getParam('width');
|
|
|
var heightParam = getParam('height');
|
|
|
var markersParam = getParam('markers');
|
|
|
var markerStylesParam = getParam('markerStyles');
|
|
|
// 通过调用 'getParam' 函数，分别从页面 URL 中获取与地图相关的不同参数值，如 'center' 参数可能表示地图的中心坐标，'zoom' 参数表示地图的缩放级别，'width' 和 'height' 参数可能用于设置地图容器（或相关元素）的尺寸，'markers' 参数可能涉及地图标记点的坐标等信息，'markerStyles' 参数也许与标记点的样式相关，将这些获取到的参数值存储在对应的变量中，方便后续在地图初始化及操作过程中使用。
|
|
|
|
|
|
//创建和初始化地图函数：
|
|
|
function initMap() {
|
|
|
// [FF]切换模式后报错
|
|
|
if (!window.BMap) {
|
|
|
return;
|
|
|
}
|
|
|
// 首先判断 window 对象下是否存在 BMap（百度地图 API 的核心对象，用于创建地图等操作），如果不存在（可能是某些特定浏览器模式切换等情况导致未正确加载百度地图 API），则直接从函数中返回，不执行后续的地图初始化操作，避免出现 JavaScript 报错。
|
|
|
|
|
|
var dituContent = document.getElementById('dituContent');
|
|
|
dituContent.style.width = widthParam + 'px';
|
|
|
dituContent.style.height = heightParam + 'px';
|
|
|
// 通过 document.getElementById 方法获取页面中 id 为 'dituContent' 的元素（也就是之前定义的地图容器 div 元素），然后根据从 URL 中获取到的 'widthParam' 和 'heightParam' 参数值，分别设置该元素的宽度和高度样式属性，动态调整地图容器的尺寸，使其符合传入的参数要求，以更好地展示地图。
|
|
|
|
|
|
createMap();//创建地图
|
|
|
setMapEvent();//设置地图事件
|
|
|
addMapControl();//向地图添加控件
|
|
|
// 依次调用三个函数，分别用于创建地图实例、设置地图相关的交互事件以及向地图添加各种操作控件，这三个函数各自承担一部分地图初始化的功能，共同完成地图在页面上的完整初始化设置，使其具备基本的显示和交互功能。
|
|
|
|
|
|
// 创建标注
|
|
|
var markersArr = markersParam.split(',');
|
|
|
var point = new BMap.Point(markersArr[0], markersArr[1]);
|
|
|
marker = new BMap.Marker(point);
|
|
|
marker.enableDragging();
|
|
|
map.addOverlay(marker); // 将标注添加到地图中
|
|
|
// 首先将从 URL 中获取到的'markersParam' 参数值（代表标记点坐标信息的字符串）通过逗号进行分割，得到一个包含坐标值的数组（markersArr），然后使用数组中的前两个元素（坐标的横纵坐标值）创建一个百度地图的坐标点对象（通过 BMap.Point 构造函数）。接着使用这个坐标点对象创建一个地图标记（marker）对象（通过 BMap.Marker 构造函数），并启用该标记的拖拽功能（enableDragging 方法），最后将这个标记对象添加到地图实例（map）中，这样在地图上就可以显示出对应的标记点，并且用户可以通过鼠标拖动该标记点来改变其位置。
|
|
|
|
|
|
if (parent.editor && parent.document.body.contentEditable == "true") { //在编辑状态下
|
|
|
setMapListener();//地图改变修改外层的iframe标签src属性
|
|
|
}
|
|
|
// 判断父页面（parent）中是否存在编辑器（editor）对象，并且父页面的 document.body 的 contentEditable 属性是否为 "true"（表示内容可编辑状态），如果满足这两个条件，说明处于某种编辑场景下，此时调用'setMapListener' 函数，用于在地图发生变化（如移动、缩放、标记点拖动等情况）时，相应地修改外层的 iframe 标签的 src 属性，实现与外部编辑器等相关元素的交互联动，实时更新地图相关信息。
|
|
|
|
|
|
}
|
|
|
|
|
|
//创建地图函数：
|
|
|
function createMap() {
|
|
|
map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
|
|
|
var centerArr = centerParam.split(',');
|
|
|
var point = new BMap.Point(parseFloat(centerArr[0]), parseFloat(centerArr[1]));//定义一个中心点坐标
|
|
|
map.centerAndZoom(point, parseInt(zoomParam));//设定地图的中心点和坐标并将地图显示在地图容器中
|
|
|
// 在名为 'createMap' 的函数内，首先通过 BMap.Map 构造函数创建一个百度地图实例，并将其关联到页面中 id 为 'dituContent' 的元素上，也就是把地图渲染到之前定义的地图容器 div 元素内，存储这个地图实例到 map 变量中。接着将从 URL 中获取到的 'centerParam' 参数值（代表地图中心坐标信息的字符串）通过逗号进行分割，得到坐标值数组（centerArr），然后将数组中的坐标值转换为数字类型（通过 parseFloat 函数）后创建一个百度地图的坐标点对象（point），该坐标点就是地图的中心点。最后通过 map.centerAndZoom 方法，传入这个中心点坐标对象以及从 URL 中获取并转换为整数类型（通过 parseInt 函数）的缩放级别参数（zoomParam），实现设定地图的中心位置和缩放级别，使地图能够按照指定的参数显示在地图容器中，完成地图的基本创建和定位操作。
|
|
|
}
|
|
|
|
|
|
//地图事件设置函数：
|
|
|
function setMapEvent() {
|
|
|
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
|
|
|
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
|
|
|
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
|
|
|
map.enableKeyboard();//启用键盘上下左右键移动地图
|
|
|
// 在'setMapEvent' 函数内，通过调用百度地图实例（map）的相关方法，启用地图的各种交互事件功能。'enableDragging' 方法启用地图的拖拽功能，允许用户通过鼠标拖动地图来改变显示区域；'enableScrollWheelZoom' 方法启用地图的滚轮缩放功能，用户可以通过滚动鼠标滚轮来放大或缩小地图；'enableDoubleClickZoom' 方法启用鼠标双击放大功能，使用户双击地图时能够放大地图查看细节（该功能默认是启用的，这里写上代码更明确表示启用此功能）；'enableKeyboard' 方法启用键盘控制功能，使得用户可以通过键盘的上下左右键来移动地图，增强地图的交互性和操作便捷性。
|
|
|
}
|
|
|
|
|
|
//地图控件添加函数：
|
|
|
function addMapControl() {
|
|
|
//向地图中添加缩放控件
|
|
|
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
|
|
|
map.addControl(ctrl_nav);
|
|
|
// 首先创建一个百度地图的导航控件（NavigationControl）对象，通过传入配置对象来指定控件的一些属性，比如 'anchor' 属性设置控件在地图上的固定位置为左上角（BMAP_ANCHOR_TOP_LEFT），'type' 属性设置为大尺寸的导航控件（BMAP_NAVIGATION_CONTROL_LARGE），然后将这个创建好的导航控件添加到地图实例（map）中，方便用户通过该控件进行地图的缩放、平移等操作，提升地图使用的便捷性。
|
|
|
|
|
|
//向地图中添加缩略图控件
|
|
|
var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
|
|
|
map.addControl(ctrl_ove);
|
|
|
// 创建一个百度地图的缩略图控件（OverviewMapControl）对象，配置其固定位置为右下角（BMAP_ANCHOR_BOTTOM_RIGHT），并将 'isOpen' 属性设置为 1，表示初始状态下缩略图控件是展开显示的，接着将该缩略图控件添加到地图实例中，使用户可以通过缩略图快速浏览地图的全貌以及定位到感兴趣的区域。
|
|
|
|
|
|
//向地图中添加比例尺控件
|
|
|
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
|
|
|
map.addControl(ctrl_sca);
|
|
|
// 创建一个百度地图的比例尺控件（ScaleControl）对象，设置其固定位置为左下角（BMAP_ANCHOR_BOTTOM_LEFT），然后将该比例尺控件添加到地图实例中，方便用户直观地查看地图的比例尺信息，了解地图上距离与实际距离的比例关系。
|
|
|
}
|
|
|
|
|
|
function setMapListener() {
|
|
|
var editor = parent.editor, containerIframe,
|
|
|
iframes = parent.document.getElementsByTagName('iframe');
|
|
|
// 在'setMapListener' 函数内，首先获取父页面（parent）中的编辑器（editor）对象（如果存在的话），声明一个变量 'containerIframe'（初始值为 undefined，用于后续存储特定的 iframe 元素），然后通过 getElementsByTagName 方法获取父页面中所有的 iframe 元素，存储在 'iframes' 数组中，这些操作都是为了后续查找与地图相关联的特定 iframe 元素以及和编辑器进行交互做准备。
|
|
|
|
|
|
for (var key in iframes) {
|
|
|
if (iframes[key].contentWindow == window) {
|
|
|
containerIframe = iframes[key];
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
// 循环遍历获取到的所有 iframe 元素数组（iframes），通过比较每个 iframe 元素的 contentWindow 属性（代表该 iframe 内部的窗口对象）是否与当前窗口（window）相等，来查找出当前地图所在的那个 iframe 元素（也就是包含地图的外层 iframe），找到后将其赋值给 'containerIframe' 变量，用于后续操作。
|
|
|
|
|
|
if (containerIframe) {
|
|
|
map.addEventListener('moveend', mapListenerHandler);
|
|
|
map.addEventListener('zoomend', mapListenerHandler);
|
|
|
marker.addEventListener('dragend', mapListenerHandler);
|
|
|
}
|
|
|
// 如果找到了对应的 'containerIframe' 元素，说明处于合适的编辑场景且找到了关联的 iframe，此时为地图实例（map）添加'moveend' 事件监听器（当地图移动结束时触发）、'zoomend' 事件监听器（当地图缩放操作结束时触发），以及为地图标记（marker）添加 'dragend' 事件监听器（当标记点拖动结束时触发），并且这些事件触发时都会执行'mapListenerHandler' 函数，用于在这些地图相关操作结束后进行相应的处理，比如更新 iframe 的 src 属性等操作，实现地图状态变化与外部编辑器的联动。
|
|
|
|
|
|
function mapListenerHandler() {
|
|
|
var zoom = map.getZoom(),
|
|
|
center = map.getCenter(),
|
|
|
marker = window.marker.getPoint();
|
|
|
containerIframe.src = containerIframe.src.
|
|
|
replace(new RegExp('([?#&])center=([^?#&]+)', 'i'), '$1center=' + center.lng + ',' + center.lat).
|
|
|
replace(new RegExp('([?#&])markers=([^?&]+)', 'i'), '$1markers=' + marker.lng + ',' + marker.lat).
|
|
|
replace(new RegExp('([?#&])zoom=([^?&]+)', 'i'), '$1zoom=' + zoom);
|
|
|
editor.fireEvent('saveScene');
|
|
|
// 在'mapListenerHandler' 函数内，首先获取当前地图的缩放级别（通过 map.getZoom() 方法）存储在 'zoom' 变量中，获取地图的中心坐标（通过 map.getCenter() 方法）存储在 'center' 变量中，获取地图标记点的坐标（通过 window.marker.getPoint() 方法）存储在'marker' 变量中。然后通过字符串替换操作，使用正则表达式在 'containerIframe'（之前找到的包含地图的 iframe 元素）的 src 属性值中查找并替换与地图中心坐标、标记点坐标以及缩放级别相关的参数值，使其更新为当前地图的最新状态对应的参数值，从而实现外部编辑器中地图显示的实时更新。最后通过编辑器（editor）的 'fireEvent' 方法触发'saveScene' 事件（具体功能依赖编辑器的实现，可能用于保存地图相关场景状态等操作），完成整个地图状态变化后的联动处理流程。
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</html> |
