网络建站知识发布于分享网站

当前位置:首页>>新闻中心>>CMS教程>>帝国cms教程

帝国CMS MAPABC地图标注(Flash版地图)

时间:2025-03-29 01:11:22    来源:    人气:0

在网站建设中,为后台添加地图标注功能是一个非常实用的操作。以下是实现这一功能的详细步骤,包括字段设置、HTML代码插入以及API密钥申请等内容。

一、后台建立字段为 [!--dbmap--]


首先,在后台数据库中添加一个名为“dbmap”的字段。完成字段添加后,需要对这个字段进行表单替换,具体操作是在[输入表单替换html代码]中加入以下代码:


<style type="text/css">
.pop{position:absolute;left:0;top:30px;width:620px;height:440px;border:1px solid #ccc;}
.pop_head{position:relative;height:20px;line-height:20px;background:#ccc}
.pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none}
.pop_head a:hover{color:#f60;text-decoration:none}
</style>
<div style="position:relative"><a href="javascript:void(0);" onclick="show('pop')">我要标注图</a>
<input name="dbmap" type="text" id="dbmap" value="<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[dbmap]))?>" size="">
<div id="pop" class="pop" style="display:none">
<div class="pop_head"><a href="javascript:void(0);" onclick="hide('pop')">关闭</a>鼠标点击目标地,可直接进行标注。</div>
<div id="mapObj" class="view" style="width:620px;height:420px"></div>
</div>
</div>
    

二、修改模型,加入地图API


接下来,在模型中加入地图API脚本。需要注意的是,蓝色部分为API密钥,可以在code.mapabc.com申请,红色部分为默认中心地址,可以在MapABC网站中查询到。


<script type="text/javascript" src="http://app.mapabc.com/apis?t=flashmap&v=2.2&key=e356278634eb6375540bad8d10d749836ab9ce3d4dd74fa01f2b93c1418eeb54acaef376799f27e2"></script>
<script type="text/javascript">
var mapObj = null;
window.onload = function() {
    var mapOptions = new MMapOptions();
    mapOptions.zoom = 10;
    mapOptions.center = new MLngLat(112.21796,30.34725);
    mapOptions.zoom = 13;
    mapOptions.toolbar = DEFAULT;
    mapOptions.toolbarPos = new MPoint(0, 0);
    mapOptions.overviewMap = DEFAULT;
    mapObj = new MMap("mapObj", mapOptions);
    registMouseAddMarker();
}

function onClick(e) {
    var ll = new MLngLat(e.eventX,e.eventY);
    var marker = new MMarker(ll);
    marker.id = "marker";
    mapObj.addOverlay(marker);
    var xy = marker.lnglat.lngX + "," + marker.lnglat.latY;
    document.getElementById("dbmap").value = xy;
    window.onclick(hide('pop'));
}

function registMouseAddMarker() {
    mapObj.addEventListener(mapObj,MOUSE_CLICK,onClick);
}

function unregistMouseAddMarker() {
    mapObj.removeEventListener(mapObj,MOUSE_CLICK,onClick);
    window.onclick(hide('pop'));
}

function show(o){
var o = document.getElementById(o);
o.style.display = "";
}

function hide(o){
var o = document.getElementById(o);
o.style.display = "none";
}
</script>
    

三、在模板加载入地图


最后一步是将地图加载到前端模板中。注意红色部分,可以修改标注点提示,具体的可以去code.mapabc.com示例中获取。


<div id="map" style="width: 676px; height: 200px"></div>
<script type="text/javascript" src="http://app.mapabc.com/apis?t=flashmap&v=2.3.4&key=e356278634eb6375540bad8d10d749836ab9ce3d4dd74fa01f2b93c1418eeb54acaef376799f27e2"></script>
<script type="text/javascript">
var mapObj=null;
var mapoption = new MMapOptions();
mapoption.overviewMap = SHOW;
mapoption.zoom = 16;
mapoption.centerCross = SHOW;
mapObj = new MMap("map", mapoption);
mapObj.addEventListener(mapObj,ADD_OVERLAY,addOverlayEvent);
var tipOption=new MTipOptions();
tipOption.content="[!--title--]";
var markerOption = new MMarkerOptions();
markerOption.imageUrl="http://www.mapabc.com/DataChannel/add/images/list_03.png";
markerOption.imageAlign=BOTTOM_CENTER;
markerOption.tipOption = tipOption;
markerOption.canShowTip= true;
var marker = new MMarker(new MLngLat([!--dbmap--]),markerOption);
mapObj.addOverlay(marker,true) ;
function addOverlayEvent(param){
    mapObj.openOverlayTip(param.overlayId);
}
</script>
    

通过以上步骤,您可以成功地在网站后台添加地图标注功能,并且能够根据需求调整显示样式和交互逻辑。这不仅提升了用户体验,也使数据管理更加直观。

相关文章

  • 帝国CMS留言板显示IP的方法

    帝国CMS留言板显示IP的方法

    在留言板和后台留言审核面板中显示留言者的IP地址,是增强网站安全性和管理效率的重要功能。通过记录和展示IP地址,管理员可以更方便地追踪留言来源,确保内容的真实性和合法性。本文将详细介绍如何实现这一功能,并优化搜索引擎排名(SEO)。 首先,我们需要了解如何在代码中正确插入IP地址的显示逻辑。以下是...
    2025-03-29
  • 帝国显示IP问题的解决方案

    帝国显示IP问题的解决方案

    在网站开发中,保护用户隐私是一个重要的考虑因素。当您在分类信息内容页添加了发布人的IP显示功能时,可能会面临如何隐藏IP地址的部分数字以保护用户隐私的问题。本文将介绍一种方法,让您能够像处理评论中的IP地址一样,将IP地址的最后一位数字替换为“*”。 为了实现这一功能,您可以使用PHP代码对IP地...
    2025-03-29
  • 帝国系统生成完整GOOGLE SITEMAP的方法

    帝国系统生成完整GOOGLE SITEMAP的方法

    创建符合SEO标准的Google Sitemap对于提高网站在搜索引擎中的可见性至关重要。以下是一篇经过改写的文章,详细介绍了如何利用栏目分别创建不同的Sitemap,并确保其符合Google的要求。 技术整理:24mp3技术支持:wm_chief, hicode 制作Google Sitema...
    2025-03-29
  • 帝国CMS教程:使用灵动标签制作友情连接

    帝国CMS教程:使用灵动标签制作友情连接

    在构建动态网站时,使用循环结构来展示数据是一种常见的做法。例如,在EmpireCMS中,我们可以利用[e:loop]标签来实现这一功能。下面是一篇关于如何使用[e:loop]标签生成友情链接列表的文章,旨在优化搜索引擎排名(SEO),同时确保代码的可读性和功能性。 在EmpireCMS中,[e:l...
    2025-03-29

公众号