一、后臺(tái)建立字段為 [!--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')">我要標(biāo)注圖</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')">關(guān)閉</a>鼠標(biāo)點(diǎn)擊目標(biāo)地,可直接進(jìn)行標(biāo)注。</div><div id="mapObj" class="view" style="width:620px;height:420px"></div></div></div>
二、修改模型,在模型中加入 (e356278634eb6375540bad8d10d749836ab9ce3d4dd74fa01f2b93c1418eeb54acaef376799f27e2為API密,可去code.mapabc.com申請(qǐng),紅色部分為默認(rèn)中心地址,可以在mapabc網(wǎng)站中查詢到。)
<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() { //設(shè)置地圖初始化參數(shù)對(duì)象 var mapOptions = new MMapOptions(); mapOptions.zoom = 10; //設(shè)置中心點(diǎn)為濟(jì)南 mapOptions.center = new MLngLat(112.21796,30.34725); mapOptions.zoom = 13; mapOptions.toolbar = DEFAULT; mapOptions.toolbarPos = new MPoint(0, 0); mapOptions.overviewMap = DEFAULT; //創(chuàng)建地圖對(duì)象 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>
三、在模板加載入地圖(注意紅色部分,可以修改標(biāo)注點(diǎn)提示,具體的可以去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>
新聞熱點(diǎn)
疑難解答
圖片精選