转 51地图demo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>太原市地图</title>
<!--导入地图JS文件-->
<script language="javascript" src=" http://api.51ditu.com/js/maps.js">
</script>
<!--地图使用函数-->
<script language="javascript">
//全图
function btnFullScreen_Click()
{
map.returnLastView();
}
//放大
function btnZoomIn_Click()
{
map.zoomIn();
}
//缩小
function btnZoomOut_Click()
{
map.zoomOut();
}
//拉框放大
function btnZoomInControl_Click()
{
zoomInControl.btnClick();
}
//拉框缩小
function btnZoomOutControl_Click()
{
zoomOutControl.btnClick();
}
//选择城区
function sCity_Change()
{
switch (document.getElementById("sCity").value)
{
case "1" :
map.moveToCenter(
new LTPoint(11256326, 3786339), 3000);
map.zoomTo(
4);
break;
case "2" :
map.moveToCenter(
new LTPoint(11256215, 3788459), 3000);
map.zoomTo(
4);
break;
case "3" :
map.moveToCenter(
new LTPoint(11248664, 3794006), 3000);
map.zoomTo(
4);
break;
case "4" :
map.moveToCenter(
new LTPoint(11251543, 3785892), 3000);
map.zoomTo(
4);
break;
case "5" :
map.moveToCenter(
new LTPoint(11247692, 3771555), 3000);
map.zoomTo(
4);
break;
case "6" :
map.moveToCenter(
new LTPoint(11256540, 3773644), 3000);
map.zoomTo(
4);
break;
default :
break;
}
}
//选择景点
function sTitle_Change()
{
var value = document.getElementById("sTitle").value;

if (value != -1)
{
document.getElementById(
"imgPrint").src = imagePath[value];
document.getElementById(
"td_content").innerHTML = bewrite[value];

map.moveToCenter(points[value],
3000);
}
}
//添加标记信息
function addInfoWin(object, num)
{
var info = new LTInfoWindow(object);

function openInfo()
{
info.setLabel(content[num]);
info.setTitle(title[num]);
//info.closeInfoWindowWithMouse();
info.moveToShow();
document.getElementById(
"imgPrint").src = imagePath[num];
document.getElementById(
"td_content").innerHTML = bewrite[num];

map.moveToCenter(points[num],
3000);
map.addOverLay(info);
}

function closeInfo()
{
window.alert(
"触发");
info.closeInfoWindow();
}

LTEvent.addListener(object,
"mouseover", openInfo);
LTEvent.addListener(object,
"mouseout", openInfo);
}
</script>
<!--创建地图-->
<script language="javascript">
var map = null; //地图
var standMapControl = null; //常用操作控件
var zoomInControl = null; //拉框放大控件
var zoomOutControl = null; //拉框缩小控件
var overviewMapControl = null; //鹰眼地图

var points = null; //标记坐标
var title = null; //标记标题
var imagePath = null; //标记图片路径
var bewrite = null; //标记描述
var content = null; //标记内容

function onLoadMap()
{
/*创建地图对象*/
map
= new LTMaps("ltMap"); //创建地图实例

/*设置地图参数*/
map.centerAndZoom (
new LTPoint(11255044, 3787262), 4); //按中心点和比例尺设置地图位置(中心点,比例尺)
map.handleKeyboard(); //键盘操作支持
map.handleMouseScroll(); //鼠标滚轮支持

/*创建控件对象*/
standMapControl
= new LTStandMapControl(); //创建常用操作控件
zoomInControl = new LTZoomInControl(1); //创建拉框放大控件
zoomOutControl = new LTZoomInControl(-1); //创建拉框缩小控件
overviewMapControl = new LTOverviewMapControl(null,null,null,null,null,2); //创建鹰眼地图

/*添加地图控件*/
map.addControl(standMapControl);
map.addControl(zoomInControl);
map.addControl(zoomOutControl);
map.addControl(overviewMapControl);

/*设置地图控件参数*/
zoomInControl.setVisible(
false);
zoomOutControl.setVisible(
false);

/*创建地图标记*/
points
= new Array(0); //标记坐标
title = new Array(0); //标记标题
imagePath = new Array(0) //图片路径
content = new Array(0); //标记内容
bewrite = new Array(0); //标记描述

/*设置标记信息*/
/*points.push(new LTPoint(11257132, 3785462));
title.push("山西中太煤炭电子交易市场");
imagePath.push("http://www.excoal.com.cn/imagesx/tu1.jpg");
bewrite.push("&nbsp;&nbsp;山西中太煤炭电子交易市场欢迎您");
content.push("<a href='http://www.excoal.com.cn' target='_blank'><img src='http://www.excoal.com.cn/imagesx/tu1.jpg' width='150px' height='75px'><br><br>山西中太煤炭电子交易市场欢迎您<br></a>");
*/

points.push(
new LTPoint(11257385, 3786048));
title.push(
"五一广场");
imagePath.push(
"http://baike.baidu.com/pic/18/11818077384734723_small.jpg");
bewrite.push(
"&nbsp;&nbsp;五一广场位于迎泽大街东段,是一处设计别致、造型美丽的广场园林。它分南北两部分,占地面积8.8万平方米,有花卉喷泉、国旗台、“晋泉之声”喷泉雕塑、花坛、小喷泉和绿篱等。");
content.push(
"<a href='http://www.chinavr.net/shanxi/ty027.htm' target='_blank'><img src='http://baike.baidu.com/pic/18/11818077384734723_small.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;五一广场位于迎泽大街东段,是一处设计别致、造型美丽的广场园林。它分南北两部分,占地面积8.8万平方米,有花卉喷泉、国旗台、“晋泉之声”喷泉雕塑、花坛、小喷泉和绿篱等。<br></a>");

points.push(
new LTPoint(11259687, 3784754));
title.push(
"双塔寺");
imagePath.push(
"http://www.chinavr.net/shanxi/tn_ty034.jpg");
bewrite.push(
"&nbsp;&nbsp;永祚寺始建于明万历年间,“祚”有请求神灵保佑的意思。因寺内双塔高耸,俗称“双塔寺”。几百年来,双塔寺被誉为“晋阳奇观”,是古太原城的八景之一。双塔八角,十三级,高55米。");
content.push(
"<a href='http://www.chinavr.net/shanxi/taiyuan/y0373w.htm' target='_blank'><img src='http://www.chinavr.net/shanxi/tn_ty034.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;永祚寺始建于明万历年间,“祚”有请求神灵保佑的意思。因寺内双塔高耸,俗称“双塔寺”。几百年来,双塔寺被誉为“晋阳奇观”,是古太原城的八景之一。双塔八角,十三级,高55米。<br></a>");

points.push(
new LTPoint(11244277, 3770615));
title.push(
"晋祠");
imagePath.push(
"http://www.chinavr.net/shanxi/tn_ty001.jpg");
bewrite.push(
"&nbsp;&nbsp;晋祠位于山西太原西南25公里处悬瓮山下,始建于北魏前,为纪念周武王次子叔虞而建。晋祠的不老泉,与周柏隋槐和宋彩塑仕女共誉“晋祠三绝”。");
content.push(
"<a href='http://www.chinavr.net/shanxi/ty001.htm' target='_blank'><img src='http://www.chinavr.net/shanxi/tn_ty001.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;晋祠位于山西太原西南25公里处悬瓮山下,始建于北魏前,为纪念周武王次子叔虞而建。晋祠的不老泉,与周柏隋槐和宋彩塑仕女共誉“晋祠三绝”。<br></a>");

points.push(
new LTPoint(11256466, 3786047));
title.push(
"迎泽宾馆");
imagePath.push(
"http://source.qunar.com//centeral/2006/N/1143172104845_md.jpg");
bewrite.push(
"&nbsp;&nbsp;迎泽宾馆是一家综合服务型的现代化四星级酒店。位于太原市主街——迎泽大街中段,与市里最大的公园——迎泽公园隔街相望,与最繁华的商业区——柳南商业中心相毗邻,地理位置优越,交通方便快捷。庭院宽展,环境幽雅,景色秀丽,设施齐备,服务上乘。主要接待国宾、国外游客、商务客人以及全国和省市级重要会议,是休闲消遣、观光旅游、商务洽谈和健身娱乐的理想场所。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/2/40601002_2_5_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=迎泽宾馆' target='_blank'><img src='http://source.qunar.com//centeral/2006/N/1143172104845_md.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;迎泽宾馆是一家综合服务型的现代化四星级酒店。位于太原市主街——迎泽大街中段,与市里最大的公园——迎泽公园隔街相望,与最繁华的商业区——柳南商业中心相毗邻,地理位置优越,交通方便快捷。庭院宽展,环境幽雅,景色秀丽,设施齐备,服务上乘。主要接待国宾、国外游客、商务客人以及全国和省市级重要会议,是休闲消遣、观光旅游、商务洽谈和健身娱乐的理想场所。<br></a>");

/*points.push(new LTPoint(11255200, 3785841));
title.push("山西大酒店");
imagePath.push("http://t6.baidu.com/it/u=2693744246,2140591561&gp=-18.jpg");
bewrite.push("&nbsp;&nbsp;山西大酒店于1989年5月开业,1997年全面装修,楼高13层,是山西省首家四星级豪华型涉外饭店,地处太原市迎泽大街和新建南路交汇处,位于市中心,距离火车站10分钟车程,机场25分钟车程,交通方便,地理位置优越。自1997年以来山西大酒店连续9次被评为山西省最佳四星级酒店、两次荣获百优五十佳全国最佳星级饭店和’97西班牙马德里国际商贸企业最佳形象奖。");
content.push("<a href='http://www.elong.com/hotels/details.aspx?m=&hotelid=40601001' target='_blank'><img src='http://t6.baidu.com/it/u=2693744246,2140591561&gp=-18.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;山西大酒店于1989年5月开业,1997年全面装修,楼高13层,是山西省首家四星级豪华型涉外饭店,地处太原市迎泽大街和新建南路交汇处,位于市中心,距离火车站10分钟车程,机场25分钟车程,交通方便,地理位置优越。自1997年以来山西大酒店连续9次被评为山西省最佳四星级酒店、两次荣获百优五十佳全国最佳星级饭店和’97西班牙马德里国际商贸企业最佳形象奖。<br></a>");
*/
points.push(
new LTPoint(11257142, 3785442));
title.push(
"金港大酒店");
imagePath.push(
"http://pic.izy.cn/web_pic/4a4/big/141988.jpg");
bewrite.push(
"&nbsp;&nbsp;金港大酒店是金港集团投资兴建的五星级现代化智能型酒店,位于五一广场南300米,并州北路35号,离火车站和长途汽车站仅5分钟车程,,距飞机场仅20分钟车程,交通便利,位置优越。酒店共39层,拥有各类客房300余间。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/10/50601005_2_6_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=金港大酒店' target='_blank'><img src='http://pic.izy.cn/web_pic/4a4/big/141988.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;金港大酒店是金港集团投资兴建的五星级现代化智能型酒店,位于五一广场南300米,并州北路35号,离火车站和长途汽车站仅5分钟车程,,距飞机场仅20分钟车程,交通便利,位置优越。酒店共39层,拥有各类客房300余间。<br></a>");

points.push(
new LTPoint(11255750, 3787410));
title.push(
"国贸大饭店");
imagePath.push(
"http://www.wanshihang.cn/Article/UploadFiles/200706/20070614205507103.jpg");
bewrite.push(
"&nbsp;&nbsp;山西国贸大饭店是山西省首家按五星级标准建设的涉外旅游饭店。依托山西国际贸易中心的一流品质,饭店具有豪华的装修、一流的设施、完善的功能。委托上海锦江国际酒店管理公司管理,可为宾客提供全方位、高品质的服务,是商务、旅行的理想选择。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/6/50601002_2_6_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=国贸大饭店' target='_blank'><img src='http://www.wanshihang.cn/Article/UploadFiles/200706/20070614205507103.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;山西国贸大饭店是山西省首家按五星级标准建设的涉外旅游饭店。依托山西国际贸易中心的一流品质,饭店具有豪华的装修、一流的设施、完善的功能。委托上海锦江国际酒店管理公司管理,可为宾客提供全方位、高品质的服务,是商务、旅行的理想选择。<br></a>");

points.push(
new LTPoint(11256238, 3786450));
title.push(
"愉园大酒店");
imagePath.push(
"http://www.yuyuanhotel.com/pic/image13.jpg");
bewrite.push(
"&nbsp;&nbsp;愉园大酒店是中港合资的旅游涉外酒店,毗邻太原市繁华的商业区,酒店实力雄厚,管理先进。 酒店楼高六十六米,共计十九层,拥有包括总统套房和各种不同规格,不同档次的客房二百六十套。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/5/40601007_2_6_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=愉园大酒店' target='_blank'><img src='http://www.yuyuanhotel.com/pic/image13.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;愉园大酒店是中港合资的旅游涉外酒店,毗邻太原市繁华的商业区,酒店实力雄厚,管理先进。 酒店楼高六十六米,共计十九层,拥有包括总统套房和各种不同规格,不同档次的客房二百六十套。<br></a>");

points.push(
new LTPoint(11255220, 3783533));
title.push(
"黄河京都大酒店");
imagePath.push(
"http://t5.baidu.com/it/u=3040362758,3352641588&gp=46.jpg");
bewrite.push(
"&nbsp;&nbsp;山西黄河京都大酒店,位于太原市平阳路19号,是集客房、中西餐、娱乐、黑泥养生、桑拿、洗浴、会议、商务服务为一体的四星级豪华酒店。是将北京的管理理念、黄河的文化风情、独特的经营项目相融会的超级巨献。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/14/40601013_2_6_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=黄河京都大酒店' target='_blank'><img src='http://t5.baidu.com/it/u=3040362758,3352641588&gp=46.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;山西黄河京都大酒店,位于太原市平阳路19号,是集客房、中西餐、娱乐、黑泥养生、桑拿、洗浴、会议、商务服务为一体的四星级豪华酒店。是将北京的管理理念、黄河的文化风情、独特的经营项目相融会的超级巨献。<br></a>");

points.push(
new LTPoint(11256840, 3787668));
title.push(
"江南大酒店");
imagePath.push(
"http://wanshihang.com/Article/UploadFiles/200707/20070704083024331.jpg");
bewrite.push(
"&nbsp;&nbsp;山西省太原江南餐饮集团有限公司始创于1991年,肩负“不断为消费者提供高品质的饮食享受”的使命,是以致力于现代餐饮酒店经营,中餐产业发展和餐饮文化传播为主的山西省大型民营企业,现有资产3亿元,是山西省唯一的中国餐饮百强企业,首批荣获中华餐饮名店称号。");
content.push(
"<a href='http://www.elong.com/hotels/Images/vtourlite.swf?theme=elongCn&fileName=http://static.elong.com/images/hotels/hotelimages/18/30601034_2_6_0_1.jpg&color1=0x5DABC1&color2=0xFFFFFF&caption=江南大酒店' target='_blank'><img src='http://wanshihang.com/Article/UploadFiles/200707/20070704083024331.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;山西省太原江南餐饮集团有限公司始创于1991年,肩负“不断为消费者提供高品质的饮食享受”的使命,是以致力于现代餐饮酒店经营,中餐产业发展和餐饮文化传播为主的山西省大型民营企业,现有资产3亿元,是山西省唯一的中国餐饮百强企业,首批荣获中华餐饮名店称号。<br></a>");

/*points.push(new LTPoint(11245365, 3771033));
title.push("晋祠宾馆");
imagePath.push("http://www.jpxf.com/meishi/UploadFiles_8639/200706/20070626180533368.jpg");
bewrite.push("&nbsp;&nbsp;晋祠宾馆位于太原风景旅游区,这里交通便利,环境优雅,设备完善,功能齐全,素有'花园别墅'和'山西钓鱼台'之美誉,宾馆紧邻晋祠公园和晋祠博物馆,周围辐射有天龙山、乔家大院、王家大院、常家庄园、平遥古城、绵山等旅游胜地,是您山西旅游最理想的驿站,无论您来自何方,只要沿大运高速公路出晋祠收费站,1分钟即到。");
content.push("<a href='http://www.elong.com/hotels/details.aspx?m=&hotelid=30601020' target='_blank'><img src='http://www.jpxf.com/meishi/UploadFiles_8639/200706/20070626180533368.jpg' width='150px' height='75px' class='asd'><br><br>&nbsp;&nbsp;晋祠宾馆位于太原风景旅游区,这里交通便利,环境优雅,设备完善,功能齐全,素有'花园别墅'和'山西钓鱼台'之美誉,宾馆紧邻晋祠公园和晋祠博物馆,周围辐射有天龙山、乔家大院、王家大院、常家庄园、平遥古城、绵山等旅游胜地,是您山西旅游最理想的驿站,无论您来自何方,只要沿大运高速公路出晋祠收费站,1分钟即到。<br></a>");
*/
/*添加标记*/
for(var i=0; i<points.length; i++)
{
var marker = new LTMarker(points[i]);

addInfoWin(marker, i);
map.addOverLay(marker);

document.getElementById(
"sTitle").add(new Option("--" + title[i], i));
}
}
</script>
<style type="text/css">
<!--
#LTMap
{
border
: 1px groove #CCCCCC;
}
body,td,th
{
font-size
: 12px;
color
: #333333;
}
a:link
{
color
: #333333;
text-decoration
: none;
}
a:visited
{
text-decoration
: none;
color
: #333333;
}
a:hover
{
text-decoration
: none;
color
: #333333;
}
a:active
{
text-decoration
: none;
color
: #333333;
}
#mapForm #imgPrint
{
border
: thin groove #CCCCCC;
}
#mapForm #tableTitle
{
border-top-width
: 1px;
border-right-width
: 1px;
border-bottom-width
: 1px;
border-left-width
: 1px;
border-top-style
: none;
border-right-style
: none;
border-bottom-style
: solid;
border-left-style
: none;
border-top-color
: #CCCCCC;
border-right-color
: #CCCCCC;
border-bottom-color
: #CCCCCC;
border-left-color
: #CCCCCC;
}
#mapForm #tableRight
{
border-top-width
: 1px;
border-right-width
: 1px;
border-bottom-width
: 1px;
border-left-width
: 1px;
border-left-style
: solid;
border-top-color
: #CCCCCC;
border-right-color
: #CCCCCC;
border-bottom-color
: #CCCCCC;
border-left-color
: #CCCCCC;
border-top-style
: none;
border-right-style
: none;
border-bottom-style
: none;
}
#mapForm table
{
border
: 1px solid #CCCCCC;
}
.asd
{
border
: 1px inset #CCCCCC;
}
body
{
background-color
: #003366;
}
-->
</style>
</head>

<body onLoad="onLoadMap()">
<form id="mapForm">
<table width="980" height="590" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="30" colspan="2">
<table id="tableTitle" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" bgcolor="#EEEEEE">
&nbsp;
<input type="button" name="btnFullScreen" value=" 全 图 " onClick="btnFullScreen_Click()"/>
<input type="button" name="btnZoomIn" value=" 放 大 " onClick="btnZoomIn_Click()"/>
<input type="button" name="btnZoomOut" value=" 缩 小 " onClick="btnZoomOut_Click()"/>
<input type="button" name="btnZoomInControl" value="拉框放大" onClick="btnZoomInControl_Click()"/>
<input type="button" name="btnZoomOutControl" value="拉框缩小" onClick="btnZoomOutControl_Click()"/>
<label>
<select name="sCity" id="sCity" onChange="sCity_Change()">
<option value="0">选择太原城区</option>
<option value="1">--迎泽区</option>
<option value="2">--杏花岭区</option>
<option value="3">--尖草坪区</option>
<option value="4">--万柏林区</option>
<option value="5">--晋源区</option>
<option value="6">--小店区</option>
</select>
</label> <label>
<select name="sTitle" id="sTitle" onChange="sTitle_Change()">
<option value="-1">选择标记地点</option>
</select>
</label></td>
</tr>
</table> </td>
</tr>
<tr>
<td width="730" height="560" align="center" valign="middle">
<!--地图DIV-->
<div id="ltMap" style="position:relative; 720px; height:550px;">
</div>
</td>
<td width="250" height="560">
<table id="tableRight" width="250" height="560" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="250" height="130" align="center" valign="middle"><img src= "http://baike.baidu.com/pic/18/11818077384734723_small.jpg" id="imgPrint" width="220" height="110"></td>
</tr>
<tr>
<td width="250" height="80" align="left" valign="top" id="td_content">
&nbsp;&nbsp;五一广场位于迎泽大街东段,是一处设计别致、造型美丽的广场园林。它分南北两部分,占地面积8.8万平方米,有花卉喷泉、国旗台、“晋泉之声”喷泉雕塑、花坛、小喷泉和绿篱等。</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
原文地址:https://www.cnblogs.com/pipizhu/p/1731295.html