您当前的位置:首页 > 帝国CMS教程

帝国cms MAPABC地图标注[flash版地图]

来源:帝国CMS教程发布者:帝国CMS模板网时间:2010-12-20

一、后台建立字段为 [!--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密,可去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>