phpcms与51地图标注整合
智博络发布最新phpcms与51地图整合（适合于各种房产分类信息等网站）。也可与其他CMS系统整合(各种CMS交流加群:69441223)。
phpcms51Ra:整合内容页及总调用页面/后台标注/自动提取标注定位/
1、后台模型字段管理中增加三个字段
分别为
lng (经度)
lat (纬度)
zoom (缩放等级)
2 ：在你系统发布信息页面增加以下代码：
第一种方法：在新加字段中字段提示项加入
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
<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("成都",5); //设置ezmarker地图的默认视图位置
ezmarker.setSearch(true,"成都"); //设置默认搜索城市
LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件
//-->
</script>
第二种方法：在admin/templates/content_add.tpl.php增加
<table><tr>
<td >经度:<font color="red">(使用右侧标注添加)</font><br></td>
<td width="38%" ><input type="text" name="lng" id="atc_lng"size="50" value={$lng}> </td>
<td width="44%" rowspan="2" >
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/search.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
<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>
<script language="javascript" src="http://api.51ditu.com/js/pv.js"></script>
<br />
标注帮助视频教程</td>
</tr>
<tr>
<td >纬度:<br></td>
<td ><input type="text" name="lat" id="atc_lat" size="50" value={$lat}> </td>
</tr></table>
3、内容页面调用
在自定义的show_XX里适当位置加入
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
<!-- 地图插件调用 -->
<div id="maps" style="position:relative; width:560px; height:350px; border:black solid 1px;">
<div align="center"><a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank" style="color:#D01E14;font-weight:bolder;font-size:12px;">看不到地图请点这里</a></div>
</div>
<script language="javascript">
var maps = new LTMaps( "maps" );
maps.centerAndZoom(new LTPoint({$lng},{$lat}),{$zoom});//调用X坐标Y坐标和缩放比例，可以用自定义字段来实现。
var c = new LTSmallMapControl();
maps.addControl(c);
var point = new LTPoint( {$lng} , {$lat} );//调用X坐标Y坐标，可以用自定义字段来实现。
var marker = new LTMarker( point );
maps.addOverLay( marker );
var text = new LTMapText( marker );
text.setLabel( "{$title}" ); //。http://bbs.enetom.com QQ:57772791制作
maps.addOverLay( text );
</script>
即完成调用
总调用数据库已存数据显示（比如推荐等等）.存为模板生成即可
<html>
<head>
<title>eneTOM.com网站联盟显示所有信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<style>
#showName ul {margin:0;padding:5px;}
</style>
</head>
<body>
<table width="960" align="center" bgcolor="#000000" cellspacing="1">
<tr bgcolor="skyblue">
<td align="center" colspan="2"><b>eneTOM.com网站联盟分布图详细信息</b></td>
</tr>
<tr bgcolor="#FFFFFF"><td align="center" width="100">名称:</td><td width="960">eneTOM.com网站联盟分布图</td></tr>
<tr bgcolor="#FFFFFF"><td colspan="2">
<div style="width:960px;height:500px;" id="mapDiv"></div>
</td></tr>
<tr bgcolor="#FFFFFF"><td align="center">说明:</td>
<td>eneTOM.com网站联盟版权所有</td>
</tr>
<tr bgcolor="#FFFFFF"><td align="right" colspan="2"><a href="http://www.enetom.com/">返回列表页面</a></td></tr>
<tr bgcolor=#FFFFFF><td colspan=2>没有数据</td></tr>
</table>
<div id="showName" style="width:100px;height:300px;border:1px solid #FF3333;font-size:12px;background-color:#D4D4D4">test</div>
<script language="javascript">
//设置弹出信息浮窗
function getClickCallBack(marker,html,title)
{
return function(){a=marker.openInfoWinHtml(html );a.setTitle(title)} ;
}
//新建地图对象
var map=new LTMaps(document.getElementById("mapDiv")); //设置需要显示地图的层ID
map.addControl(new LTStandMapControl()); //实例化地图导航控件
map.addControl(new LTOverviewMapControl()); //实例化鹰眼控件
//初始化标注信息相关变量
var points=[];
var names=[];
var contents=[];
//-------------------标注信息 bbs.enetom.com ---------------------------
{get sql="SELECT
a.contentid,a.title,a.areaid,b.lng,b.lat,b.zoom,b.wuydz,b.junjia,b.shoulrx,a.inputtime,a.userid,a.updatetime,a.description,a.keywords,a.style,a.islink,a.catid
FROM `phpcms_content` a, `phpcms_c_newhouse` b,
`phpcms_content_position` p WHERE a.contentid=b.contentid AND
a.status=99 AND a.contentid=p.contentid AND p.posid=6 ORDER BY
a.contentid DESC" rows="50"}此处为后台数据调用函数，请自行设置
points.push(new LTPoint( {$r[lng]} , {$r[lat]} ));
names.push("{$r[标题]}");
contents.push('{$r[名称]}');
{/get}
//-------------------标注信息 End ---------------------------
//得到可以显示所有标注的最佳缩放等级
map.getBestMap(points);
var scaleControl=new LTScaleControl(); //实例化比例尺控件,实时显示地图比例尺
scaleControl.setLeft(10); //设置比例尺左边距
scaleControl.setBottom(20); //设置比例尺下边距
map.addControl(scaleControl); //向地图添加一个比例尺控件
for(var i=0;i<points.length;i++)
{
var marker = new LTMarker( points );
map.addOverLay( marker );
var html=contents;
var mapText=new LTMapText(marker);
mapText.setLabel(names);
map.addOverLay(mapText);
var title=names;
//
LTEvent.addListener( marker , "click" ,getClickCallBack(marker,html,title));
}
//函数功能：当点击左侧地名链接时，随即在地图上显示其浮窗信息
//思路：新创建一个标注控件，并使其为不可见，其实显示的信息是新创建标注的浮窗信息，
// 试过很多方法行不通，这个也只是一个折中的解决方法。
function onNamesClick(point2,html2,title2)
{
var marker=new LTMarker(point2); //在原point上新实例化一个图形标注
map.addOverLay(marker); //在地图上创建一个图形标注
marker.setVisible(0); //设置标注不可见
var infowin=marker.openInfoWinHtml(html2); //浮窗内容
infowin.setTitle(title2); //浮窗标题
}
var htm=" ";
function showName(){
for (var i=0;i<names.length;i++)
{
htm+="<li><a href='javascript:void(0)' onclick='map.moveToCenter(points["+i+"]);onNamesClick(points["+i+"],contents["+i+"],names["+i+"])'>"+names+"</a></li>";
}
}
showName();
//输出标注地名列表
document.getElementById("showName").innerHTML="<ul>"+htm+"</ul>";
var selfShowName=new LTHtmlElementControl(document.getElementById("showName"));
selfShowName.setRight(0);
map.addControl(selfShowName);
</script>
</body>
</html>
浙公网安备 33010602011771号