欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

【百度编辑器】-地图组件-添加周边信息【附近公交】

程序员文章站 2022-06-03 08:58:37
...
给百度编辑器的地图组件添加附近公交站的信息展示
效果图:
【百度编辑器】-地图组件-添加周边信息【附近公交】

【百度编辑器】-地图组件-添加周边信息【附近公交】

代码修改:

主要是两个文件:
Ueditor\dialogs\map\map.html (后台编辑模板)
Ueditor\dialogs\map\show.html (前台展示模板)

修改map.html: 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{
var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),}); // 修改了这里,创建了自定义的标注图标
point = new BMap.Point(120.621962,31.344312); // 创建点坐标
marker = new BMap.Marker(point,{icon:myIcon}); // 修改了这里,替换系统的标注图标
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
}
marker.enableDragging();
map.addOverlay(marker);
}
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=' + 430, // 修改了这里,这里是地图的宽度,因为加了一个公交信息展示的div,所以我把地图宽度调小了点
'&height=' + mapHeight,
'&markers=' + point.lng + ',' + point.lat,
'&markerStyles=' + 'l,A'].join('');
editor.execCommand('inserthtml', ''); // 修改了这里,这里面的width="' + (430+4+210);其中的430对应上面的宽度,210我加的div宽度
} 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', '【百度编辑器】-地图组件-添加周边信息【附近公交】');
}
};
修改show.html

这里添加了一个div,用于展示公交信息











附近公交





//创建和初始化地图函数:
function initMap() {
// [FF]切换模式后报错
if (!window.BMap) {
return;
}
var dituContent = document.getElementById('dituContent');
dituContent.style.width = widthParam + 'px';
dituContent.style.height = heightParam + 'px';

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); // 将标注添加到地图中

// 这里开始下面,修改了标注图标
var myIcon = new BMap.Icon("/Public/images/tools/shops-icon.png", new BMap.Size(30,60),{offset: new BMap.Size(17, 60),});
var marker2 = new BMap.Marker(point,{icon:myIcon}); // 创建标注
marker2.enableDragging();
map.addOverlay(marker2); // 将标注添加到地图中

// 这里开始下面获取了周边公交信息
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "busSite"}
}); // 这里的 panel: "busSite",中的busSite 公交信息面板div的ID
local.disableFirstResultSelection();
local.setPageCapacity(5);
local.searchNearby("公交",point,1000); // “公交” 可以改成别的试试!
// 这里结束周边公交信息获取
if(parent.editor && parent.document.body.contentEditable=="true") { //在编辑状态下
setMapListener();//地图改变修改外层的iframe标签src属性
}
}

AD:真正免费,域名+虚机+企业邮箱=0元