51ditu maps API 使用——显示所有信息——点击链接显示对应标记浮窗[修]
2008-01-15 10:12
429 查看
因为要做一个地图服务类的子模块,找了很多信息,开始想到了GIS,后来发现人的无知真的会使其变得很愚蠢,等我学会GIS整个项目都做完了。百度,google,发现51地图很好,到官网逛了逛,又发现还有开发API,咿,小心肝扑扑嘞~~
感谢晨晨,在晨晨小站上我真的学到很多东西。只是一直有个问题,在显示所有信息的时候我想当用户点击左边的<A>链接后地图上即显示其浮窗信息。原效果(晨晨小站上的demo)如下:
http://www.chenchenmap.cn/demo3/showall.asp
我修改了一下代码,如下(代码复制后可直接运行):51ditu Maps API 类参考文档
因为初次接触,所以添了注释,大家互相学习,(*^__^*) 嘻嘻……
附:
晨晨小站 http://www.chenchenmap.cn
51 ditu Maps API 类参考文档http://api.51ditu.com/docs/mapsapi/reference.html
<html>
<head>
<title>显示所有信息</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="780" align="center" bgcolor="#000000" cellspacing="1">
<tr bgcolor="skyblue"><td align="center" colspan="2"><b>设备详细信息</b></td></tr>
<tr bgcolor="#FFFFFF"><td align="center" width="100">名称:</td><td width="680">显示所有标注</td></tr>
<tr bgcolor="#FFFFFF"><td colspan="2">
<div style="width:780px;height:500px;" id="mapDiv"></div>
</td></tr>
<tr bgcolor="#FFFFFF"><td align="center">说明:</td><td>显示所有设备信息</td></tr>
<tr bgcolor="#FFFFFF"><td align="right" colspan="2"><a href="index.asp">返回列表页面</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=[];
//-------------------标注信息 Start---------------------------
points.push(new LTPoint(12030070,3157892));
names.push("test");
contents.push('地址:3333dfdf');
points.push(new LTPoint(11981485,3135590));
names.push("移动营业厅One");
contents.push('地址:3333haha哈');
//-------------------标注信息 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[i] );
map.addOverLay( marker );
var html=contents[i];
var mapText=new LTMapText(marker);
mapText.setLabel(names[i]);
map.addOverLay(mapText);
var title=names[i];
//
LTEvent.addListener( marker , "click" ,getClickCallBack(marker,html,title));
}
//函数功能:当点击左侧地名链接时,随即在地图上显示其浮窗信息
//思路:新创建一个标注控件,并使其为不可见,其实显示的信息是新创建标注的浮窗信息,
// 试过很多方法行不通,这个也只是一个折中的解决方法。
function onNamesClick(point2,html2,title2)
{
var marker=new LTMarker(point2); //在原point[i]上新实例化一个图形标注
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[i]+"</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>
感谢晨晨,在晨晨小站上我真的学到很多东西。只是一直有个问题,在显示所有信息的时候我想当用户点击左边的<A>链接后地图上即显示其浮窗信息。原效果(晨晨小站上的demo)如下:
http://www.chenchenmap.cn/demo3/showall.asp
我修改了一下代码,如下(代码复制后可直接运行):51ditu Maps API 类参考文档
因为初次接触,所以添了注释,大家互相学习,(*^__^*) 嘻嘻……
附:
晨晨小站 http://www.chenchenmap.cn
51 ditu Maps API 类参考文档http://api.51ditu.com/docs/mapsapi/reference.html
<html>
<head>
<title>显示所有信息</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="780" align="center" bgcolor="#000000" cellspacing="1">
<tr bgcolor="skyblue"><td align="center" colspan="2"><b>设备详细信息</b></td></tr>
<tr bgcolor="#FFFFFF"><td align="center" width="100">名称:</td><td width="680">显示所有标注</td></tr>
<tr bgcolor="#FFFFFF"><td colspan="2">
<div style="width:780px;height:500px;" id="mapDiv"></div>
</td></tr>
<tr bgcolor="#FFFFFF"><td align="center">说明:</td><td>显示所有设备信息</td></tr>
<tr bgcolor="#FFFFFF"><td align="right" colspan="2"><a href="index.asp">返回列表页面</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=[];
//-------------------标注信息 Start---------------------------
points.push(new LTPoint(12030070,3157892));
names.push("test");
contents.push('地址:3333dfdf');
points.push(new LTPoint(11981485,3135590));
names.push("移动营业厅One");
contents.push('地址:3333haha哈');
//-------------------标注信息 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[i] );
map.addOverLay( marker );
var html=contents[i];
var mapText=new LTMapText(marker);
mapText.setLabel(names[i]);
map.addOverLay(mapText);
var title=names[i];
//
LTEvent.addListener( marker , "click" ,getClickCallBack(marker,html,title));
}
//函数功能:当点击左侧地名链接时,随即在地图上显示其浮窗信息
//思路:新创建一个标注控件,并使其为不可见,其实显示的信息是新创建标注的浮窗信息,
// 试过很多方法行不通,这个也只是一个折中的解决方法。
function onNamesClick(point2,html2,title2)
{
var marker=new LTMarker(point2); //在原point[i]上新实例化一个图形标注
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[i]+"</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>
相关文章推荐
- 四.用户管理页面(显示所有的用户信息,同时为用户的添加,编辑,修改密码,删除,修改权限等功能提供相应的链接) UserMange.aspx
- 使用DateGridView显示表所有信息
- 在昨天作业的基础上添加 :删除按钮,修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能/新建页面DataXML,使用GridView显示book.xm中的图书信息
- java爬虫框架——jsoup的简单使用(爬取电影天堂的所有电影的信息,包括下载的链接)
- 如何使用jQuery去掉指定标签里所有文字内容对应的链接,即去掉<a>标签
- 指定当前的页面中的所有链接点击之后以新窗口的形式弹出,而不在当前页面显示链接的东西
- 百度地图搜索某个城市(地区)的包含某关键词的所有地点,并显示锚点,点击地点显示信息框
- 怎么把js获得的list数据加上链接定向显示在HTML中,并且点击对应内容会访问链接内容
- javaEE01-使用很HTML的排版标签编写“网站信息页面”,使用图片标签编写“图面显示页面”,使用列表标签编写“友情链接页面”,使用表格标签编写“首页”,框架标签表现“后台页面”
- vue与leaflet的结合使用,在popup上放置一个按钮,点击后使用amout挂载一个未挂载的实例,显示一些信息
- jsp的EL表达式中建立链接隐藏id,点击链接进入新页面,显示详细信息
- 点击一个链接可以在指定的div块中显示(使用jquery实现)
- 使用XmlDocument将dropdownlist中显示的书名的其它信息读入到相应的文本框中。添加 :删除按钮,修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能(XmlDocument)
- javascript 实现页面加载完自动点击链接显示框架右侧信息页面
- 使用session实现简单的购物车 (将点击了购买链接的书籍放到购物车页面显示出来)。
- modalDialog的使用,图片切换,点击图片时打开一个窗体,并显示信息
- WordPress后台的文章、分类,媒体,页面,评论,链接等所有信息中显示ID并将ID设置为第一列
- Ubuntu 使用 nmcli 显示网络的所有信息
- android LocationManager的简单使用(获取经纬度信息到textview显示)
- web view的图片添加点击事件,和获取所有图片链接