首頁 > 織夢cms教程 閱讀:0更新時間:2021-03-29 16:20:38

Dedecms房產內容模型(含51地圖標記)

自從上次發布了房產模型之后,最近幾天不斷收到會員短消息像我詢問演示地址中的地圖標注是如何弄的,今天正好有空,整理一下就發布出來。

  言歸正傳,在租房模型中新建立三個字段,分別是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>


  修改頁面,后臺發布頁面,后臺編輯頁面請自行對照修改

beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

通俗易懂,深入淺出,一篇文章只講一個知識點。

文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

文章不涉及代碼,不燒腦細胞,人人都可以學習。

當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

優秀教程

国产亚洲欧美日韩