建站學院(LieHuo.Net)訊 自從上次發布了房產模型之后,最近幾天不斷收到會員短消息像我詢問演示地址中的地圖標注是如何弄的,今天正好有空,整理一下就發布出來。
言歸正傳,在租房模型中新建立三個字段,分別是lng、lat、zoom,lng是經度,lat是緯度,zoom是縮放等級。在建立字段的時候字段類型選擇 “已經固化到發布表單中的字段” 數據類型選擇“整數類型”
三個字段建立完畢之后,找到前臺會員發布信息頁面的模板
在頭部加上
以下為引用的內容: <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script> <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script> |
以下為引用的內容: //自定義字段 PrintAutoFieldsAdd($cInfos['fieldset'],'autofield'); //游客強制加驗證碼,會員則判斷后臺開關 if(!$cfg_ml->IsLogin() || $cfg_vdcode_member=='Y') { ?> |
以下為引用的內容: <tr> <td align="right" valign="top">地圖標注</td> <td><script language="JavaScript"> <!-- //setMap是ezmarker內部定義的接口,這里可以根據實際需要實現該接口 function setMap(point,zoom) { document.getElementById("lng").value=point.getLongitude(); document.getElementById("lat").value=point.getLatitude(); document.getElementById("zoom").value=zoom; } var ezmarker = new LTEZMarker("pos"); ezmarker.setDefaultView("shanghai",5); //設置ezmarker地圖的默認視圖位置 ezmarker.setSearch(true,"上海"); //設置默認搜索城市 LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是標注事件 --> </script>(標注您的房源位置)</td> </tr> <tr> <td align="right" valign="top">地圖坐標</td> <td>經度:<input name="lng" readonly type="text" id="lng" size="10" value="" /> 緯度:<input name="lat" readonly type="text" id="lat" size="10" value="" /> 縮放等級:<input readonly name="zoom" type="text" id="zoom" size="2" value="" /></td> </tr> |
以下為引用的內容: <div id="mapDiv" style="height:280px;width:250px;"></div> |
以下為引用的內容: <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script> <script language="javascript"> var place_x="{dede:field.lng /}"; var place_y="{dede:field.lat /}"; var zoom="{dede:field.zoom /}"; place_x=place_x==""?0:parseInt(place_x); place_y=place_y==""?0:parseInt(place_y); zoom=zoom==""?1:parseInt(zoom); var map; map=new LTMaps("mapDiv"); map.addControl(new LTStandMapControl(1)); map.centerAndZoom(new LTPoint(place_x,place_y),zoom); var marker1 = new LTMarker( new LTPoint( place_x , place_y ) ); map.addOverLay( marker1 ); var point=new LTPoint(place_x,place_y+40); var infoWin=new LTInfoWindow(point); map.addOverLay( infoWin ); </script> |