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

帝国cms功能之MAPABC地图标注[flash版地图]
一、后台建立字段为 [!–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>