51地图用法

<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; width: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/yuji/archive/2009/03/30/1424935.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值