zoukankan      html  css  js  c++  java
  • 转 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>
  • 相关阅读:
    linux 下安装 mysql (centos7)版本
    linux 安装php7 -系统centos7
    Beta阶段事后分析
    Beta阶段展示博客
    Beta阶段测试报告
    Beta阶段发布说明
    第二十次ScrumMeeting博客
    第十九次ScrumMeeting博客
    第十八次ScrumMeeting博客
    第十七次ScrumMeeting博客
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1731295.html
Copyright © 2011-2022 走看看