本教程首发在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当中获取并保存坐标。
[ 本帖最后由 pcload 于 2008-4-9 11:27 编辑 ]
最新回复
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>
上面的
CODE:
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
是引入了JS，此两行代码不引入，地图标注将无法正常工作。<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
CODE:
<script language="JavaScript">
这个就是用来输出了一个标注的接口，默认城市是新乡，缩放等级是6，你可以根据开放文档自由的进行编辑。<!--
//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>
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>
完成后的地图坐标的提交就做好了，过程如下：
SpxImage5.jpg
SpxImage6.jpg
SpxImage7.jpg
SpxImage8.jpg
同样，根据开发文档http://api.51ditu.com/你可以获取多种样式，用来表示你的地图坐标。
这里我们来说一种常用的，最后效果如下图：
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>
一定要注意当中的$item[lng]等，是用来读取字段的，当我那篇房产展示发出来以后，很多朋友都在问我如何自定义调用自己字段，其实很简单，和官方的字段调用都是一样的，在view.html.php页面当中，你可以利用$item[字段名]来调用任何字段信息。在category.html.php等页面当中，你可以利用$value[字段名称]来任意调用字段，注意，这里调不出来图片那样的字段。<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>
CODE:
<!--{loop $listarr $key $value}--> 内容 <!--{/loop}-->其他的都可以删除，然后根据自己模板的需求，自己来调用字段，调用标题。不用的地方是$value[ss_url] 用来输出信息链接
$value[ss_imgurl] 用来输出信息封面
当中的内容 你当然可以自由发挥。用模型来做出来自己想要的任何样式。
好了，我们再来继续刚才我们的话题，你可以在
CODE:
var infoWin=new LTInfoWindow(point);下面加入CODE:
infoWin.setTitle("$item[subject]");用来显示输出的标题和标签。 subject我找了是标题 quyu是该地方所在的区域 xiangxidizhi是该地方的详细地址。infoWin.setLabel("{$item[quyu]} {$item[xiangxidizhi]}");
最后效果就如图上面的演示图了。
当然，还有一个问题，如果用户不标注地图的话，会怎样呢，页面当中，会提示发现不了地图输出层。
这个时候，我们需要在那些代码当中加入一个If语句，只有在经纬度有内容的时候， 才会输出。
CODE:
<!--{if !empty($item[lng])}-->1<!--{else}-->2这句的意思就是，如果lng经度不为空，输出1，如果为空输出2.因为刚才我们的表单当中做了限制，用户不可以自己输入坐标，所以，这里就只需要判断一个即可。<!--{/if}-->
完整的地步代码如下：
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地图的开发文档，作出任何你想要的效果。
首先，建立经纬度和缩放等级的字段。
其次，在提交表单当中修改代码，让用户可以标注地图并保持到相应的字段里面。
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}-->
如何修改提交表单的样式
如何自由调用字段
如何更改列表模板当中显示的内容
如何制作地图标记
好了，有了以上内容以后，你可以把模型发挥到极致，任何你想要的效果，都可以进行实现。因为版权问题，就不留演示地址了。
题外话：最近很闹心，可能一直在这里的朋友也知道，就是因为八界时间，打乱我几天的正常生活，让我无心做任何事情，的确挺郁闷的，后来为了不造成更大的影响，迫不得已才删除了那个长篇大论的教程帖子。
删除过以后，很多人骂我，说什么狗日的杂种，加阅读权限不让新手看，还要怎么气死我。反正说什么难听的话都有，我不想多解释了，只是想问你们一句，自己辛苦花20多天写的教程，一点回报都没有，那么多文字那么多图片截图，自己是为的什么，就是为了挨你们这些人骂吗？
八界的事情已经弄得我很怕了，再有你们这些人骂我，我都不知道我到底做错了什么。
好了，过多的话，我就不说了，这个教程本来不想写的，因为最近的确是特别的烦，什么事情都不顺。
因为当初说过，几天以后会写模型教程，为了最先说过的话，再来一篇教程，仔细看完这篇教程，你可能会自由操作SS的模型了。
这篇教程可能就是我在这里发的最后一篇教程里，我实属无奈。可能以后也不常在这里发言了，帮助那些朋友解答问题，最后还吃力不讨好的，我自找的，我犯贱。
当然，我不会离开discuz论坛，我自己开了个选吧，http://u.discuz.net/home/space-mtag-tagid-1767.html 是讨论地方门户的，以后会一直在哪里进行交流，小范围的交流，总没有多大事情吧。
演示地址：www.google.cn
[ 本帖最后由 pcload 于 2008-4-10 16:21 编辑 ]
(2008-04-10 16:21:06, Size: 28 KB, Downloads: 222)
经纬度还是和以前一样，自己在添加信息的时候输入进去，至于那些经纬度如何获取，把如下代码保存到html结尾的文件当中。
不会的下载附件。
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>
(2008-04-09 10:33:01, Size: 1.15 KB, Downloads: 234)
如果你看了这个教程，并且利用当中学习到的知识，做出来你满意的模型以后。
留下一个网址吧，我这里显示。
哈哈
没有抢到啊..
加精华本身会增加积分的哦