在很多时候，你需要你的用户标出一个位置，比如：一个房地产网站，用户在登记新楼盘的时候，就需要在地图上标出这个楼盘的位置。商家发布促销信息，就可以标注促销地点。下面我们就来讲解一下，如何在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当中获取并保存坐标。
在官方默认模板当中，你可以看到用户发布信息的表单是用
复制内容到剪贴板
代码:
$formstr
来表示的，我们怎么样来修改当中的信息呢？
这里有一个笨方法提供给你，就是先把这个页面输出一下，也就是，在网页当中打开这个模板，看看$formstr输出了什么内容，然后，在模板当中用SS模型输出的内容来代替$formstr。
以：
复制内容到剪贴板
代码:
<form method="post" name="thevalueform" id="theform"
开头，
复制内容到剪贴板
代码:
</div><input name="mid" type="hidden" value="6" /><input name="valuesubmit" type="hidden" value="yes" /></form>
<script></script>
结尾。
这样一来，我们就可以自由编辑当中的信息了，需要注意的一点就是，这样做以后，就不能随意修改字段了，并且，不能随意开启和关闭注册码。这样的操作，都可能导致表单无法正常提交，并且不会出现任何错误提示。
其他字段你要怎么改我不管你，只要能让网页表单提交不存在问题即可。找到其中的
复制内容到剪贴板
代码:
<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>
用以下代码来替换：
复制内容到剪贴板
代码:
<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>
替换后的代码详解，替换后的代码用来引入51地图的标注接口，接口引入方式是JavaScript。
上面的
复制内容到剪贴板
代码:
<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，此两行代码不引入，地图标注将无法正常工作。
复制内容到剪贴板
代码:
<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，你可以根据开放文档自由的进行编辑。
复制内容到剪贴板
代码:
<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>
用来保存刚才读取到的经纬度和缩放等级，这里是用来正常显示，但是无法输入的，你也可以隐藏这些内容，只要能让获取的坐标保持在相应的字段中即可。
完成后的地图坐标的提交就做好了，过程如下：
