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

本教程首发在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当中获取并保存坐标。



===2009年12月24日更新===
待业了 制作各种SS模板 解决各种SS难题 需要的联系QQ29459528

在官方默认模板当中，你可以看到用户发布信息的表单是用

1. $formstr

复制代码

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

1. <form method="post" name="thevalueform" id="theform"

复制代码

开头，

1. </div><input name="mid" type="hidden" value="6" /><input name="valuesubmit" type="hidden" value="yes" /></form>
   
2. 
   
3. <script></script>

复制代码

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

1. <tr id="tr_lng">
   
2. <th>经度<p>长度在20个字符之内。</p></th>
   
3. <td><input name="lng" type="text" id="lng" size="52" value="" /></td>
   
4. </tr>
   
5. 
   
6. <tr id="tr_lat">
   
7. <th>纬度<p>长度在20个字符之内。</p></th>
   
8. <td><input name="lat" type="text" id="lat" size="52" value="" /></td>
   
9. </tr>
   
10. 
    
11. <tr id="tr_zoom">
    
12. <th>缩放等级<p>长度在2个字符之内。</p></th>
    
13. <td><input name="zoom" type="text" id="zoom" size="52" value="" /></td>
    
14. </tr>

复制代码

用以下代码来替换：

1. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
   
2. <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
   
3. 
   
4. <tr>
   
5. <th>地图标注</th>
   
6. <td><script language="JavaScript">
   
7. 
   
8. <!--
   
9. 
   
10. //setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口
    
11. 
    
12. function setMap(point,zoom)
    
13. 
    
14. {
    
15. 
    
16. document.getElementById("lng").value=point.getLongitude();
    
17. 
    
18. document.getElementById("lat").value=point.getLatitude();
    
19. 
    
20. document.getElementById("zoom").value=zoom;
    
21. 
    
22. }
    
23. var ezmarker = new LTEZMarker("pos");
    
24. ezmarker.setDefaultView("xinxiang",6); //设置ezmarker地图的默认视图位置
    
25. ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
    
26. LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件
    
27. 
    
28. //-->
    
29. 
    
30. </script></td>
    
31. </tr>
    
32. 
    
33. <tr>
    
34. <th>地图坐标</th>
    
35. <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>
    
36. </tr>

复制代码

替换后的代码详解，替换后的代码用来引入51地图的标注接口，接口引入方式是JavaScript。
上面的

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

复制代码

是引入了JS，此两行代码不引入，地图标注将无法正常工作。

1. <script language="JavaScript">
   
2. 
   
3. <!--
   
4. 
   
5. //setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口
   
6. 
   
7. function setMap(point,zoom)
   
8. 
   
9. {
   
10. 
    
11. document.getElementById("lng").value=point.getLongitude();
    
12. 
    
13. document.getElementById("lat").value=point.getLatitude();
    
14. 
    
15. document.getElementById("zoom").value=zoom;
    
16. 
    
17. }
    
18. var ezmarker = new LTEZMarker("pos");
    
19. ezmarker.setDefaultView("xinxiang",6); //设置ezmarker地图的默认视图位置
    
20. ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
    
21. LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件
    
22. 
    
23. //-->
    
24. 
    
25. </script>

复制代码

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

1. <tr>
   
2. <th>地图坐标</th>
   
3. <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>
   
4. </tr>

复制代码

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

接下来，就是编辑view.html.php，用来显示地图坐标了。
同样，根据开发文档http://api.51ditu.com/你可以获取多种样式，用来表示你的地图坐标。
这里我们来说一种常用的，最后效果如下图：

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

1. <div id="mapDiv" style="height:300px;width:300px;"></div>

复制代码

意思就是说，在这一层当中，用来显示地图，宽度和高度都是300，此处宽度高度可以自定义，id不能变动。
然后在模板的最底部来读取地图经纬度和缩放等级。输出到mapdiv层当中。

1. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
   
2. <script language="javascript">
   
3. var place_x="$item[lng]";
   
4. var place_y="$item[lat]";
   
5. var zoom="$item[zoom]";
   
6. place_x=place_x==""?0:parseInt(place_x);
   
7. place_y=place_y==""?0:parseInt(place_y);
   
8. zoom=zoom==""?1:parseInt(zoom);
   
9. var map;
   
10. 
    
11. map=new LTMaps("mapDiv");
    
12. map.centerAndZoom(new LTPoint(place_x,place_y),zoom);
    
13. map.addControl(new LTStandMapControl(1));
    
14. 
    
15. var marker1 = new LTMarker( new LTPoint( place_x , place_y ) );
    
16. map.addOverLay( marker1 );
    
17. var point=new LTPoint(place_x,place_y+40);
    
18. var infoWin=new LTInfoWindow(point);
    
19. map.addOverLay( infoWin );
    
20. </script>

复制代码

一定要注意当中的$item[lng]等，是用来读取字段的，当我那篇房产展示发出来以后，很多朋友都在问我如何自定义调用自己字段，其实很简单，和官方的字段调用都是一样的，在view.html.php页面当中，你可以利用$item[字段名]来调用任何字段信息。在category.html.php等页面当中，你可以利用$value[字段名称]来任意调用字段，注意，这里调不出来图片那样的字段。

插句题外讲解，还有很多朋友问我，如何在category.html.php模板当中自由调用自己的信息，其实还是很简单，你理解上面那段话以后，再来分析官方默认的模板。在需要循环列表的地方，你只需要保留如下内容：

1. <!--{loop $listarr $key $value}--> 内容 <!--{/loop}-->

复制代码

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

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

1. var infoWin=new LTInfoWindow(point);

复制代码

下面加入

1. infoWin.setTitle("$item[subject]");
   
2. infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");

复制代码

用来显示输出的标题和标签。 subject我找了是标题 quyu是该地方所在的区域 xiangxidizhi是该地方的详细地址。
最后效果就如图上面的演示图了。

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

1. <!--{if !empty($item[lng])}-->1<!--{else}-->2
   
2. <!--{/if}-->

复制代码

这句的意思就是，如果lng经度不为空，输出1，如果为空输出2.因为刚才我们的表单当中做了限制，用户不可以自己输入坐标，所以，这里就只需要判断一个即可。
完整的地步代码如下：

1. <!--{if !empty($item[lng]) && !empty($item[lat])}-->
   
2. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
   
3. <script language="javascript">
   
4. var place_x="$item[lng]";
   
5. var place_y="$item[lat]";
   
6. var zoom="$item[zoom]";
   
7. place_x=place_x==""?0:parseInt(place_x);
   
8. place_y=place_y==""?0:parseInt(place_y);
   
9. zoom=zoom==""?1:parseInt(zoom);
   
10. var map;
    
11. 
    
12. map=new LTMaps("mapDiv");
    
13. map.centerAndZoom(new LTPoint(place_x,place_y),zoom);
    
14. map.addControl(new LTStandMapControl(1));
    
15. 
    
16. var marker1 = new LTMarker( new LTPoint( place_x , place_y ) );
    
17. map.addOverLay( marker1 );
    
18. var point=new LTPoint(place_x,place_y+40);
    
19. var infoWin=new LTInfoWindow(point);
    
20. infoWin.setTitle("$item[subject]");
    
21. infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
    
22. map.addOverLay( infoWin );
    
23. </script><!--{else}-->
    
24. <!--{/if}-->

复制代码

如果有坐标，输出坐标调用代码，如果没有，则输出空内容。
这样一来，就完整了，地图标注也就做好了，你可以根据51地图的开发文档，作出任何你想要的效果。

最后，我们来回顾加入地图标注的方法：
首先，建立经纬度和缩放等级的字段。
其次，在提交表单当中修改代码，让用户可以标注地图并保持到相应的字段里面。

1. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
   
2. <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
   
3. 
   
4. <tr>
   
5. <th>地图标注</th>
   
6. <td><script language="JavaScript">
   
7. 
   
8. <!--
   
9. 
   
10. //setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口
    
11. 
    
12. function setMap(point,zoom)
    
13. 
    
14. {
    
15. 
    
16. document.getElementById("lng").value=point.getLongitude();
    
17. 
    
18. document.getElementById("lat").value=point.getLatitude();
    
19. 
    
20. document.getElementById("zoom").value=zoom;
    
21. 
    
22. }
    
23. var ezmarker = new LTEZMarker("pos");
    
24. ezmarker.setDefaultView("xinxiang",6); //设置ezmarker地图的默认视图位置
    
25. ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
    
26. LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件
    
27. 
    
28. //-->
    
29. 
    
30. </script></td>
    
31. </tr>
    
32. 
    
33. <tr>
    
34. <th>地图坐标</th>
    
35. <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>
    
36. </tr>

复制代码

然后，在输出模板当中，在你要显示地图的地方加入：

1. <div id="mapDiv" style="height:300px;width:300px;"></div>

复制代码

模板最下面加入

1. <!--{if !empty($item[lng]) && !empty($item[lat])}-->
   
2. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
   
3. <script language="javascript">
   
4. var place_x="$item[lng]";
   
5. var place_y="$item[lat]";
   
6. var zoom="$item[zoom]";
   
7. place_x=place_x==""?0:parseInt(place_x);
   
8. place_y=place_y==""?0:parseInt(place_y);
   
9. zoom=zoom==""?1:parseInt(zoom);
   
10. var map;
    
11. 
    
12. map=new LTMaps("mapDiv");
    
13. map.centerAndZoom(new LTPoint(place_x,place_y),zoom);
    
14. map.addControl(new LTStandMapControl(1));
    
15. 
    
16. var marker1 = new LTMarker( new LTPoint( place_x , place_y ) );
    
17. map.addOverLay( marker1 );
    
18. var point=new LTPoint(place_x,place_y+40);
    
19. var infoWin=new LTInfoWindow(point);
    
20. infoWin.setTitle("$item[subject]");
    
21. infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
    
22. map.addOverLay( infoWin );
    
23. </script><!--{else}-->
    
24. <!--{/if}-->

复制代码

我们来回顾一下本教程当中我们学习到的知识：
如何修改提交表单的样式
如何自由调用字段
如何更改列表模板当中显示的内容
如何制作地图标记

好了，有了以上内容以后，你可以把模型发挥到极致，任何你想要的效果，都可以进行实现。因为版权问题，就不留演示地址了。

题外话：最近很闹心，可能一直在这里的朋友也知道，就是因为八界时间，打乱我几天的正常生活，让我无心做任何事情，的确挺郁闷的，后来为了不造成更大的影响，迫不得已才删除了那个长篇大论的教程帖子。
删除过以后，很多人骂我，说什么狗日的杂种，加阅读权限不让新手看，还要怎么气死我。反正说什么难听的话都有，我不想多解释了，只是想问你们一句，自己辛苦花20多天写的教程，一点回报都没有，那么多文字那么多图片截图，自己是为的什么，就是为了挨你们这些人骂吗？
八界的事情已经弄得我很怕了，再有你们这些人骂我，我都不知道我到底做错了什么。
好了，过多的话，我就不说了，这个教程本来不想写的，因为最近的确是特别的烦，什么事情都不顺。
因为当初说过，几天以后会写模型教程，为了最先说过的话，再来一篇教程，仔细看完这篇教程，你可能会自由操作SS的模型了。

这篇教程可能就是我在这里发的最后一篇教程里，我实属无奈。可能以后也不常在这里发言了，帮助那些朋友解答问题，最后还吃力不讨好的，我自找的，我犯贱。
当然，我不会离开discuz论坛，我自己开了个选吧，http://u.discuz.net/home/space-mtag-tagid-1767.html 是讨论地方门户的，以后会一直在哪里进行交流，小范围的交流，总没有多大事情吧。

送大家一个GOOGLE首页的导航
演示地址：www.google.cn

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

添加，如果你要应用地图标记，并且，不需要用户输入坐标，你可以不修改提交表单，只修改显示的目标即可。
经纬度还是和以前一样，自己在添加信息的时候输入进去，至于那些经纬度如何获取，把如下代码保存到html结尾的文件当中。
不会的下载附件。

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
2. <html xmlns="http://www.w3.org/1999/xhtml">
   
3. <head>
   
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
5. <title>pcload地图坐标读取工具</title>
   
6. <style type="text/css">
   
7. <!--
   
8. body {
   
9.         font: 100% Verdana, Arial, Helvetica, sans-serif;
   
10.         background: #666666;
    
11.         margin: 0;
    
12.         padding: 0;
    
13.         text-align: center;
    
14.         color: #000000;
    
15. }
    
16. .oneColElsCtr #container {
    
17.         width: 46em;
    
18.         background: #FFFFFF;
    
19.         margin: 0 auto;
    
20.         border: 1px solid #000000;
    
21.         text-align: left;
    
22. }
    
23. .oneColElsCtr #mainContent {
    
24.         padding: 0 20px;
    
25. }
    
26. -->
    
27. </style></head>
    
28. 
    
29. <body class="oneColElsCtr">
    
30. 
    
31. <div id="container">
    
32.   <div id="mainContent">
    
33. <h1> pcload地图坐标读取工具 </h1>
    
34.     <p>该工具是用来读取地图坐标,包括经度/纬度.</p>
    
35.     <script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
    
36.     <script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
    
37. <h2>标注获取坐标</h2>
    
38. <table>
    
39. 
    
40. <tr><td colspan='2'></td></tr>
    
41. 
    
42. <tr><td>经度</td><td><input type="text" id="x" name="x"></td></tr>
    
43. 
    
44. <tr><td>纬度</td><td><input type="text" id="y" name="y"></td></tr>
    
45. 
    
46. <tr><td>比例尺级别</td><td><input type="text" id="z" name="z"></td></tr>
    
47. 
    
48. </table>
    
49. 
    
50. <script language="JavaScript">
    
51. 
    
52. <!--
    
53. 
    
54. //setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口
    
55. 
    
56. function setMap(point,zoom)
    
57. 
    
58. {
    
59. 
    
60. document.getElementById("x").value=point.getLongitude();
    
61. 
    
62. document.getElementById("y").value=point.getLatitude();
    
63. 
    
64. document.getElementById("z").value=zoom;
    
65. 
    
66. }
    
67. 
    
68. var ezmarker = new LTEZMarker("pos");
    
69. ezmarker.setDefaultView("xinxiang",6); //设置ezmarker地图的默认视图位置
    
70. ezmarker.setSearch(true,"新乡"); //设置默认搜索城市
    
71. LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件
    
72. 
    
73. //-->
    
74. 
    
75. </script>
    
76. 
    
77. 
    
78. 
    
79. </div>
    
80. </div>
    
81. 
    
82. </body>
    
83. </html>

复制代码

既然第一页马上就要用完了，那我就用完吧。
如果你看了这个教程，并且利用当中学习到的知识，做出来你满意的模型以后。
留下一个网址吧，我这里显示。