【百度编辑器】-地图组件-添加周边信息【附近公交】
给百度编辑器的地图组件添加附近公交站的信息展示
效果图:
代码修改:
主要是两个文件:
Ueditor\dialogs\map\map.html (后台编辑模板)
Ueditor\dialogs\map\show.html (前台展示模板)
修改map.html: function init(){<br>
var mapNode = editor.selection.getRange().getClosedNode(),<br>
isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),<br>
isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');<br>
if(isMapImg || isMapIframe){<br>
var url, centerPos, markerPos;<br>
if(isMapIframe) {<br>
url = decodeURIComponent(mapNode.getAttribute("src"));<br>
$G('is_dynamic').checked = true;<br>
styleStr = mapNode.style.cssText;<br>
} else {<br>
url = mapNode.getAttribute("src");<br>
styleStr = mapNode.style.cssText;<br>
}<br>
<br>
centerPos = getPars(url,"center").split(",");<br>
markerPos = getPars(url, "markers").split(",");<br>
point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1]));<br>
marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));<br>
map.addControl(new BMap.NavigationControl());<br>
map.centerAndZoom(point, Number(getPars(url,"zoom")));<br>
}else{<br>
var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),}); // 修改了这里,创建了自定义的标注图标<br>
point = new BMap.Point(120.621962,31.344312); // 创建点坐标<br>
marker = new BMap.Marker(point,{icon:myIcon}); // 修改了这里,替换系统的标注图标<br>
map.addControl(new BMap.NavigationControl());<br>
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。<br>
}<br>
marker.enableDragging();<br>
map.addOverlay(marker);<br>
}
dialog.onok = function (){<br>
var center = map.getCenter();<br>
var zoom = map.zoomLevel;<br>
var size = map.getSize();<br>
var mapWidth = size.width;<br>
var mapHeight = size.height;<br>
var point = marker.getPoint();<br>
<br>
if($G('is_dynamic').checked) {<br>
var URL = editor.options.UEDITOR_HOME_URL,<br>
url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +<br>
'#center=' + center.lng + ',' + center.lat,<br>
'&zoom=' + zoom,<br>
'&width=' + 430, // 修改了这里,这里是地图的宽度,因为加了一个公交信息展示的div,所以我把地图宽度调小了点<br>
'&height=' + mapHeight,<br>
'&markers=' + point.lng + ',' + point.lat,<br>
'&markerStyles=' + 'l,A'].join('');<br>
editor.execCommand('inserthtml', '<iframe></iframe>'); // 修改了这里,这里面的width="' + (430+4+210);其中的430对应上面的宽度,210我加的div宽度<br>
} else {<br>
var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +<br>
"&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;<br>
editor.execCommand('inserthtml', '<img src="/static/imghw/default1.png" data-src="' + url + '" class="lazy" alt="【百度编辑器】-地图组件-添加周边信息【附近公交】" >');<br>
}<br>
};
修改show.html
这里添加了一个div,用于展示公交信息<br>
<!--百度地图容器--><br>
<table>
<br>
<tr>
<br>
<td>
<br>
<div></div>
<br>
</td>
<br>
<td>
<br>
<div>
<br>
<div>
<br>
附近公交<br>
</div>
<br>
<div></div>
<br>
<br>
</div>
<br>
</td>
<br>
</tr>
<br>
</table>
<br>
//创建和初始化地图函数:<br>
function initMap() {<br>
// [FF]切换模式后报错<br>
if (!window.BMap) {<br>
return;<br>
}<br>
var dituContent = document.getElementById('dituContent');<br>
dituContent.style.width = widthParam + 'px';<br>
dituContent.style.height = heightParam + 'px';<br>
<br>
createMap();//创建地图<br>
setMapEvent();//设置地图事件<br>
addMapControl();//向地图添加控件<br>
<br>
// 创建标注<br>
var markersArr = markersParam.split(',');<br>
var point = new BMap.Point(markersArr[0], markersArr[1]);<br>
// marker = new BMap.Marker(point);<br>
// marker.enableDragging();<br>
// map.addOverlay(marker); // 将标注添加到地图中<br>
<br>
// 这里开始下面,修改了标注图标<br>
var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),});<br>
var marker2 = new BMap.Marker(point,{icon:myIcon}); // 创建标注<br>
marker2.enableDragging();<br>
map.addOverlay(marker2); // 将标注添加到地图中<br>
<br>
// 这里开始下面获取了周边公交信息<br>
var local = new BMap.LocalSearch(map, {<br>
renderOptions: {map: map, panel: "busSite"}<br>
}); // 这里的 panel: "busSite",中的busSite 公交信息面板div的ID<br>
local.disableFirstResultSelection();<br>
local.setPageCapacity(5);<br>
local.searchNearby("公交",point,1000); // “公交” 可以改成别的试试!<br>
// 这里结束周边公交信息获取<br>
if(parent.editor && parent.document.body.contentEditable=="true") { //在编辑状态下<br>
setMapListener();//地图改变修改外层的iframe标签src属性<br>
}<br>
}
AD:真正免费,域名+虚机+企业邮箱=0元

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

了解Python编程的入门级代码示例Python是一种简单易学,功能强大的编程语言。对于初学者来说,了解Python编程的入门级代码示例是非常重要的。本文将为您提供一些具体的代码示例,帮助您快速入门。打印HelloWorldprint("HelloWorld")这是Python中最简单的代码示例。print()函数用于将指定的内容输出

PHP变量存储程序运行期间的值,对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量,并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码,并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

标题:从入门到精通:Go语言中常用数据结构的代码实现数据结构在编程中起着至关重要的作用,它是程序设计的基础。在Go语言中,有许多常用的数据结构,掌握这些数据结构的实现方式对于成为一名优秀的程序员至关重要。本文将介绍Go语言中常用的数据结构,并给出相应的代码示例,帮助读者从入门到精通这些数据结构。1.数组(Array)数组是一种基本的数据结构,是一组相同类型

如何使用PHP编写库存管理系统中的库存分仓管理功能代码库存管理是许多企业中不可或缺的一部分。对于拥有多个仓库的企业来说,库存分仓管理功能尤为重要。通过合理管理和跟踪库存,企业可以实现不同仓库之间的库存调拨,优化运营成本,改善协同效率。本文将介绍如何使用PHP编写库存分仓管理功能的代码,并为您提供相关的代码示例。一、建立数据库在开始编写库存分仓管理功能的代码之

Java冒泡排序最简单的代码示例冒泡排序是一种常见的排序算法,它的基本思想是通过相邻元素的比较和交换来将待排序序列逐步调整为有序序列。下面是一个简单的Java代码示例,演示了如何实现冒泡排序:publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

《Go语言编程实例:Web开发中的代码示例》随着互联网的快速发展,Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言,Go语言在Web开发中越来越受到开发者们的青睐。本文将通过具体的代码示例,介绍如何利用Go语言进行Web开发,让读者能够更好地理解和运用Go语言来构建自己的Web应用。1.简单的HTTP服务器首先,让我们从一个

华为云边缘计算对接指南:Java代码示例快速实现接口随着物联网技术的快速发展和边缘计算的兴起,越来越多的企业开始关注边缘计算的应用。华为云提供了边缘计算服务,为企业提供了高可靠的计算资源和便捷的开发环境,使得边缘计算应用更加容易实现。本文将介绍如何通过Java代码快速实现华为云边缘计算的接口。首先,我们需要准备好开发环境。确保你已经安装了Java开发工具包(

Java选择排序法代码编写指南及示例选择排序是一种简单直观的排序算法,其思想是每次从未排序的元素中选择最小(或最大)的元素进行交换,直到所有元素排序完成。本文将提供选择排序的代码编写指南,并附上具体的Java示例代码。算法原理选择排序的基本原理是将待排序数组分为已排序和未排序两部分,每次从未排序部分选择最小(或最大)的元素,将其放到已排序部分的末尾。重复上述
