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>


  修改页面,后台发布页面,后台编辑页面请自行对照修改

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。


来源:网友投稿 关注: 时间:2018-12-10 10:11
首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制(了解更多)
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ进行交流。
相关织梦教程
QQ在线咨询