注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板  

2009-04-09 11:04:10|  分类: discuz |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://x.discuz.net/viewthread-890233.html

本教程首发在discuz论坛,由pcload原创,转载请注明出处,做人要厚道。

在很多时候,你需要你的用户标出一个位置,比如:一个房地产网站,用户在登记新楼盘的时候,就需要在地图上标出这个楼盘的位置。商家发布促销信息,就可以标注促销地点。下面我们就来讲解一下,如何在SS的模型当中使用地图标注。
目前互联网当中提供地图标注的网站很多,最常见的是51DITU和MAPABC。
方法都是类似的,我们这个教程,用51地图来做讲解。以下简称51,为了不再涉及到纠纷问题,本教程不提任何网站信息。

分析原理:地图标注的道理其实很简单,就是让用户标注地图,得到经纬度保存,然后在显示页面输出经纬度即可。
我们需要修改的模板只有两个
post.html.php 用来发布信息的模型模板
view.html.php 用来显示信息的模型模板

我们要做的就是,在post.html.php模板当中也就是在发布信息的时候,用户提交经纬度坐标,然后在view.html.php也就是显示信息的页面当中输出信息。

首先,在你的模型当中编辑你自己定义的字段,然后新建三个字段分别用来保存经度、纬度、缩放等级,字段名称分别是lng lat zoom,长度为10-20的定长CHAR字段,缩放等级的长度为2.

完毕以后,地图标记理论上就好了,可是如何让用户标注地图来输入坐标,和如何来显示坐标呢?
接下来就需要我们修改模板了,参考51的开发文档http://api.51ditu.com/docs/ezmarkerapi.html
我们先来解决如何在post.html.php当中获取并保存坐标。



===2008年10月29日更新===
SS7一直不出来...
DZ7一直不出来...
UC1.5一直不满意....

官方论坛已经不再关注了,你SS真的很强大,可以满足你的很多需求,动动脑子,至少现在我需要的东西还没有SS做不出来的,如果你在制作模板或使用SS当中遇到问题,就在我的博客提出吧,我会尽量给你解答的,官方论坛很少来了。去那里也不经常解答问题了,在discuz旧的,可能知道我,用户名是pcload,曾经因为一个帖子点击率超过十万吧SS模板区带火了一把,后来因为一些事情,被强奸了。唉,这些事情不提了,有事您留言。
http://www.pcload.com.cn/2008/10/29/ss/

pcload (2008-4-09 09:47:57)

CODE:

$formstr来表示的,我们怎么样来修改当中的信息呢?
这里有一个笨方法提供给你,就是先把这个页面输出一下,也就是,在网页当中打开这个模板,看看$formstr输出了什么内容,然后,在模板当中用SS模型输出的内容来代替$formstr。
以:

CODE:

<form method="post" name="thevalueform" id="theform" 开头,

CODE:

</div><input name="mid" type="hidden" value="6" /><input name="valuesubmit" type="hidden" value="yes" /></form>

<script></script>
结尾。
这样一来,我们就可以自由编辑当中的信息了,需要注意的一点就是,这样做以后,就不能随意修改字段了,并且,不能随意开启和关闭注册码。这样的操作,都可能导致表单无法正常提交,并且不会出现任何错误提示。
其他字段你要怎么改我不管你,只要能让网页表单提交不存在问题即可。找到其中的

CODE:

<tr id="tr_lng">
<th>经度<p>长度在20个字符之内。</p></th>
<td><input name="lng" type="text" id="lng" size="52" value="" /></td>
</tr>

<tr id="tr_lat">
<th>纬度<p>长度在20个字符之内。</p></th>
<td><input name="lat" type="text" id="lat" size="52" value="" /></td>
</tr>

<tr id="tr_zoom">
<th>缩放等级<p>长度在2个字符之内。</p></th>
<td><input name="zoom" type="text" id="zoom" size="52" value="" /></td>
</tr>
用以下代码来替换:

CODE:

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>

<tr>
<th>地图标注</th>
<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("xinxiang",6); //设置ezmarker地图的默认视图位置
ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件

//-->

</script></td>
</tr>

<tr>
<th>地图坐标</th>
<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>
pcload (2008-4-09 09:54:16)

CODE:

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>

<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
是引入了JS,此两行代码不引入,地图标注将无法正常工作。

CODE:

<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("xinxiang",6); //设置ezmarker地图的默认视图位置
ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件

//-->

</script>
这个就是用来输出了一个标注的接口,默认城市是新乡,缩放等级是6,你可以根据开放文档自由的进行编辑。

CODE:

<tr>
<th>地图坐标</th>
<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>
用来保存刚才读取到的经纬度和缩放等级,这里是用来正常显示,但是无法输入的,你也可以隐藏这些内容,只要能让获取的坐标保持在相应的字段中即可。
完成后的地图坐标的提交就做好了,过程如下:

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客
SpxImage5.jpg

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客
SpxImage6.jpg

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客
SpxImage7.jpg

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客
SpxImage8.jpg

pcload (2008-4-09 10:04:41)
http://api.51ditu.com/你可以获取多种样式,用来表示你的地图坐标。
这里我们来说一种常用的,最后效果如下图:

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客
SpxImage10.jpg


首先,我们在相应的位置放入如下代码:

CODE:

<div id="mapDiv" style="height:300px;width:300px;"></div>意思就是说,在这一层当中,用来显示地图,宽度和高度都是300,此处宽度高度可以自定义,id不能变动。
然后在模板的最底部来读取地图经纬度和缩放等级。输出到mapdiv层当中。

CODE:

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript">
var place_x="$item[lng]";
var place_y="$item[lat]";
var zoom="$item[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.centerAndZoom(new LTPoint(place_x,place_y),zoom);
map.addControl(new LTStandMapControl(1));

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>
一定要注意当中的$item[lng]等,是用来读取字段的,当我那篇房产展示发出来以后,很多朋友都在问我如何自定义调用自己字段,其实很简单,和官方的字段调用都是一样的,在view.html.php页面当中,你可以利用$item[字段名]来调用任何字段信息。在category.html.php等页面当中,你可以利用$value[字段名称]来任意调用字段,注意,这里调不出来图片那样的字段。
pcload (2008-4-09 10:14:04)

CODE:

<!--{loop $listarr $key $value}--> 内容 <!--{/loop}-->其他的都可以删除,然后根据自己模板的需求,自己来调用字段,调用标题。不用的地方是
$value[ss_url] 用来输出信息链接
$value[ss_imgurl] 用来输出信息封面
当中的内容 你当然可以自由发挥。用模型来做出来自己想要的任何样式。

好了,我们再来继续刚才我们的话题,你可以在

CODE:

var infoWin=new LTInfoWindow(point);下面加入

CODE:

infoWin.setTitle("$item[subject]");
infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
用来显示输出的标题和标签。 subject我找了是标题 quyu是该地方所在的区域 xiangxidizhi是该地方的详细地址。
最后效果就如图上面的演示图了。

当然,还有一个问题,如果用户不标注地图的话,会怎样呢,页面当中,会提示发现不了地图输出层。
这个时候,我们需要在那些代码当中加入一个If语句,只有在经纬度有内容的时候, 才会输出。

CODE:

<!--{if !empty($item[lng])}-->1<!--{else}-->2
<!--{/if}-->
这句的意思就是,如果lng经度不为空,输出1,如果为空输出2.因为刚才我们的表单当中做了限制,用户不可以自己输入坐标,所以,这里就只需要判断一个即可。
完整的地步代码如下:

CODE:

<!--{if !empty($item[lng]) && !empty($item[lat])}-->
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript">
var place_x="$item[lng]";
var place_y="$item[lat]";
var zoom="$item[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.centerAndZoom(new LTPoint(place_x,place_y),zoom);
map.addControl(new LTStandMapControl(1));

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);
infoWin.setTitle("$item[subject]");
infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
map.addOverLay( infoWin );
</script><!--{else}-->
<!--{/if}-->
如果有坐标,输出坐标调用代码,如果没有,则输出空内容。
这样一来,就完整了,地图标注也就做好了,你可以根据51地图的开发文档,作出任何你想要的效果。
pcload (2008-4-09 10:16:47)

CODE:

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>

<tr>
<th>地图标注</th>
<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("xinxiang",6); //设置ezmarker地图的默认视图位置
ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件

//-->

</script></td>
</tr>

<tr>
<th>地图坐标</th>
<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>
然后,在输出模板当中,在你要显示地图的地方加入:

CODE:

<div id="mapDiv" style="height:300px;width:300px;"></div>模板最下面加入

CODE:

<!--{if !empty($item[lng]) && !empty($item[lat])}-->
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript">
var place_x="$item[lng]";
var place_y="$item[lat]";
var zoom="$item[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.centerAndZoom(new LTPoint(place_x,place_y),zoom);
map.addControl(new LTStandMapControl(1));

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);
infoWin.setTitle("$item[subject]");
infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
map.addOverLay( infoWin );
</script><!--{else}-->
<!--{/if}-->
pcload (2008-4-09 10:28:05)
http://u.discuz.net/home/space-mtag-tagid-1767.html 是讨论地方门户的,以后会一直在哪里进行交流,小范围的交流,总没有多大事情吧。
pcload (2008-4-09 10:29:14)
www.google.cn

[ 本帖最后由 pcload 于 2008-4-10 16:21 编辑 ]

如何让SS模型结合并使用地图标注 自由定义字段制作出强大的模型模板 - phperwuhan - phperwuhan的博客011-韩国google菜单效果.zip
(2008-04-10 16:21:06, Size: 28 KB, Downloads: 714)

pcload (2008-4-09 10:33:01)

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pcload地图坐标读取工具</title>
<style type="text/css">
<!--
body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000;
}
.oneColElsCtr #container {
        width: 46em;
        background: #FFFFFF;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
}
.oneColElsCtr #mainContent {
        padding: 0 20px;
}
-->
</style></head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
<h1> pcload地图坐标读取工具 </h1>
    <p>该工具是用来读取地图坐标,包括经度/纬度.</p>
    <script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
    <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
<h2>标注获取坐标</h2>
<table>

<tr><td colspan='2'></td></tr>

<tr><td>经度</td><td><input type="text" id="x" name="x"></td></tr>

<tr><td>纬度</td><td><input type="text" id="y" name="y"></td></tr>

<tr><td>比例尺级别</td><td><input type="text" id="z" name="z"></td></tr>

</table>

<script language="JavaScript">

<!--

//setMap是ezmarker内部定义的接口,这里可以根据实际需要实现该接口

function setMap(point,zoom)

{

document.getElementById("x").value=point.getLongitude();

document.getElementById("y").value=point.getLatitude();

document.getElementById("z").value=zoom;

}

var ezmarker = new LTEZMarker("pos");
ezmarker.setDefaultView("xinxiang",6); //设置ezmarker地图的默认视图位置
ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件

//-->

</script>



</div>
</div>

</body>
</html>
  评论这张
 
阅读(407)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017