高德地图-畅的

来源：互联网发布：网络购彩最新消息编辑：程序博客网时间：2024/06/11 16:02

<!doctype html>
<html class="no-js" lang="zh-CN">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>畅的地图-北京畅的科技有限公司</title>
       <meta name="description" content="北京畅的科技开发有限公司成立于2015年，集充电网、车联网、互联网技术于一身，全力打造“三网合一”新时代，形成了“以车带桩，以桩稳车”的全新业务运营新模式" />
       <meta name="viewport"
   content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="renderer" content="webkit">
   <meta http-equiv="Cache-Control" content="no-siteapp"/>
   <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="views/IMJ2V2/css/amazeui.min.css">
   <link rel="stylesheet" href="views/IMJ2V2/css/style.css">
   <link rel="stylesheet" type="text/css" href="views/IMJ2V2/css/index.css"/>
   <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=5c24a94947fb4804efdc35df35fbe64c&plugin=AMap.MarkerClusterer"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
       * {
            margin: 0;
            padding: 0;
        }
       body { margin:0px;padding:0px;text-align: center;}

       #container{
             position: absolute;
             top: 15%;
             height: 85%;
       }
       #hidebg {
                  position:absolute;left:0px;top:0px;
                 background-color:#000;
                 width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
                 filter:alpha(opacity=60); /*设置透明度为60%*/
                 opacity:0.6; /*非IE浏览器下设置透明度为60%*/
                 display:none; /* http://www.jb51.net */
                 z-Index:998;
                }
       #hidebox {
                    position:absolute;
                    width: 490px;
                    height:550px;
                    top:100px;
                    left:30%;
                    background-color:#fff;
                    display:none;
                    cursor:pointer;
                    z-Index:999;
                    }
       #content {
                  text-align:center;
                  cursor:pointer;
                  z-Index:1;
                  }
       #contentShou{
               position:relative;
               z-index:99;
               height:63px;
               padding:15px 0 0 20px;
               border-bottom:0;
               margin-top:110px ;
               margin-left: 20px;
               }
       #contentShou .first input{
               border: 1px solid #b8cfe6;
              }
        input{
            border:0;
            width:288px;
            height:30px;
            font-size:14px;
            padding:0 5px;
            line-height:30px;
        }

       #contentShou .first button{
           width:68px;
           height:32px;
           overflow:hidden;
           border:1px solid #ccc;
           text-align:center;
           color:#000000;
           letter-spacing:5px;
           background:#cee1fa;
           cursor:pointer;
           font-weight: bold;
           font-size: 14px;
        }
        .item{
            padding:3px 5px;
            cursor:pointer;
        }
        .addbg{
            background:#b8cfe6;
        }
        .first{
            width:400px;
        }
        #append{
           margin-left:13px;
           width: 298px;
            border:solid #b8cfe6 2px;
            border-top:0;
            display:none;
            background: #FFFFFF;
        }

        .box {
            width: 490px;
            height: 170px;
            /*border: 1px solid #ccc;*/
            margin: 0 auto;
        }
        .inner {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
        #hidebox .box .inner {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
         #hidebox .box ul {
            width: 500%;
            list-style: none;
            position: absolute;
            left: 0;
        }
         #hidebox .box li {
            float: left;
        }
        #hidebox .box #inner .square{
           position: absolute;
            bottom: 10px;
            right: 10px;
        }

       #hidebox .box #inner .square span {
            display: inline-block;
            width: 16px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            text-align: center;
            margin: 3px;
            border: 1px solid #ccc;
            line-height: 16px;
            cursor: pointer;
        }
        #hidebox .hidebox-shou{
           height: 50px;
           width: 490px;
        }

        #hidebox .hidebox-shou div{
           text-align: center;
           height: 50px;
           line-height: 50px;
        }

        #hidebox .hidebox-shou div h3{
           width: 466px;
           padding-left: 24px;
        }
        #hidebox .hidebox-shou div{
           float: left;
        }
        #hidebox div div span{
           padding: 2px;
        }

         #hidebox div div span img{
            width: 20px;
            height: 20px;
         }
        .current {
            background-color: darkorange!important;
            color: #fff;
        }

        header{
           background: rgba(26,31,42,0.75);
           position: absolute;
           top: -30px;

           transition: all 1s;
        }

        a{
           color:#3190ee;
        }

        .z-left{
        }
        .z-xin{
           width: 490px;
           height: 250px;
           margin: 0 auto;
        }
        .z-xin .tab-head{
           text-align: left!important;
           height: 40px;
           border-top:1px solid #888888;
            border-bottom:1px solid #888888 ;
        }
        .z-xin .tab-head h3{
           height: 40px;
           width: 100px;
           line-height: 40px;
            margin: 0;
            float: left;
            text-align: center;
            font-size: 14px;
            font-weight:800;
        }
        .z-xin .tab-head h3:hover{
           color:darkorange;
           border-bottom:2px solid darkorange;
        }
        .clear{ clear:both}
        .tab-content div{
           padding-top: 10px;
        }
        .tab-content div p{
           padding-left: 21px;
           font-size: 12px;
           text-align: left;
           color: #888888;
           margin-top: 5px;
        }

        .tab-content div p span{
           color: darkorange;
           margin-left: 230px;
        }
        .tab-content div{
           display: none;
        }


        .tab-content .show{
           display: block;
        }

        table{
           width: 490px;
           margin-top:5px ;
           color: #888888;
           font-size: 12px;
        }

        .tab-content div:nth-child(2){
           height: 200px;
           margin: 10px;
           overflow: auto;
        }
        .tab-content div ul{
           list-style: none;
        }

        .tab-content div ul li{
           float: left;
           width: 100px;
           height: 110px;
           text-align: center;
           border: 1px solid #c9c8c8;
           font-size: 12px;
        }
        .tab-content div ul li img{
           width: 70px;
           height: 70px;
        }

   </style>

   
   
</head>

<body>
<header class="m-hd">
   <section data-am-sticky class="am-show-md-up">
    <div class="am-container">
        <a href="index.html" rel="nofollow" class="m-logo"><i class="am-icon-spinner"></i> J2 Network</a>
        <nav>
          <ul class="m-nav am-nav am-nav-pills am-fr">
            <li><a href="index.html" rel="nofollow">网站首页</a></li>
            <li class="am-dropdown" data-am-dropdown><a href="/anli.html" rel="nofollow" class="am-dropdown-toggle" data-am-dropdown-toggle>云平台 <span class="am-icon-caret-down"></span></a>
              <ul class="am-dropdown-content">
                <li><a href="ChargingPilePlatform.html" rel="nofollow">畅的桩平台</a></li>
                <li><a href="carPlatform.html" rel="nofollow">畅的车平台</a></li>
              </ul>
            </li>
            <li><a href="dianzhanExample.html" rel="nofollow">案例展示</a></li>
            <li><a href="APPdownload.html" rel="nofollow">APP下载</a></li>
            <li class="am-dropdown" data-am-dropdown><a href="/anli.html" rel="nofollow" class="am-dropdown-toggle" data-am-dropdown-toggle>最新资讯<span class="am-icon-caret-down"></span></a>
              <ul class="am-dropdown-content">
                <li><a href="news.html" rel="nofollow">畅的新闻</a></li>
                <li><a href="biddingAnnouncement.html" rel="nofollow">公司公告</a></li>
              </ul>
            </li>
            <li><a href="powermap.html" rel="nofollow">畅的地图</a></li>
            <li><a href="about.html" rel="nofollow">联系我们</a></li>
            
          </ul>
        </nav>
        
    </section>

    </div>
    <nav data-am-widget="header" class="am-header am-show-sm-only">
      <div class="am-header-left am-header-nav">
        <a href="/" rel="nofollow">
          <i class="am-header-icon am-icon-home"></i> 首页
        </a>
      </div>
      <h1 class="am-header-title">
        <a href="/" rel="nofollow">北京畅的科技开发有限公司</a>
      </h1>
      <div class="am-header-right am-header-nav">
        <a href="#right-link" class="" data-am-offcanvas="{target: '#r-nav'}">
          <i class="am-header-icon am-icon-bars"></i> 菜单
        </a>
      </div>
    </nav>

    
    <div id="r-nav" class="am-offcanvas">
      <div class="am-offcanvas-bar am-offcanvas-bar-flip">
        <nav class="am-offcanvas-content">
            <a href="/" rel="nofollow"><span class="logo"></span></a>
            <p><i class="am-icon-home"></i> <a href="index.html" rel="nofollow">网站首页</a></p>
            <p><i class="am-icon-desktop"></i> <a href="chargingPilePlatform.html" rel="nofollow">畅的桩平台</a></p>
            <p><i class="am-icon-desktop"></i> <a href="carPlatform.html" rel="nofollow">畅的车平台</a></p>
            <p><i class="am-icon-desktop"></i> <a href="dianzhanExample.html" rel="nofollow">案例展示</a></p>
            <p><i class="am-icon-credit-card"></i> <a href="APPdownload.html" rel="nofollow">APP下载</a></p>
            <p><i class="am-icon-credit-card"></i> <a href="news.html" rel="nofollow">最新资讯</a></p>
            <p><i class="am-icon-credit-card"></i> <a href="powermap.html" rel="nofollow">畅的地图</a></p>
            <p><i class="am-icon-user"></i> <a href="about.html" rel="nofollow">联系我们</a></p>
            
        </nav>
      </div>
    </div>
</header>
<div id="container"></div>
       <div id="hidebg"></div>
       <div id="hidebox">
           <div class="hidebox-shou">
               <div ><h3>合康变频</h3></div>
               <div><span onClick="hide();"><img src="img/close.png"/></span></div>


           </div>
       <div class="box">
            <div class="inner" id="inner">
                <ul>
                    <li><img src="img/01.jpg" /></li>
                    <li><img src="img/02.jpg" /></li>
                    <li><img src="img/03.jpg" /></li>
                    <li><img src="img/04.jpg" /></li>
                    <li><img src="img/05.jpg" /></li>
                </ul>
                <div class="square">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
        </div>
        <div class="z-xin">
            <div class="tab-head">
               <h3 onmouseover="changeTab(0)">站点信息</h3>
               <h3 onmouseover="changeTab(1)">电桩状态</h3>
            </div>
            <div class="clear"></div>
            <div class="tab-content">
               <div class="show">
                   <p>站点地址：北京经济技术开发区博兴2路3号</p>
                    <p>运营商：北京畅的科技</p>
                    <p>电桩数量：共8根桩</p>
                    <hr />
                    <p>开放时间：0：00 - 23：59 <span>电价时段说明</span></p>
                     <hr />
                    <table>
                       <tbody>
                           <tr>
                               <td>时段</td>
                               <td>充电单价（元/度）</td>
                               <td>服务费（元/度）</td>
                            </tr>
                            <tr>
                               <td>00:00 - 24:00</td>
                               <td>1.3</td>
                               <td>0.8</td>
                            </tr>
                       </tbody>
                    </table>

               </div>
               <div>
                   <ul>
                       <li >
                           <img src="img/powermap/ac_charging.png"/>
                           <br />
                           <span>CHHK_AC00070</span>
                           <br />
                           <span>空闲</span>
                       </li>
                       <li >
                           <img src="img/powermap/ac_leisure.png"/>
                       </li>
                       <li >
                           <img src="img/powermap/dc_charging.png"/>
                       </li>
                       <li >
                           <img src="img/powermap/dc_leisure.png"/>
                       </li>
                       <li >
                           <img src="img/powermap/lost_connection.png"/>
                       </li>
                       <li >
                           <img src="img/powermap/maintain.png"/>
                       </li>
                   </ul>

               </div>
            </div>

        </div>
   </div>


       

        <div id="contentShou">
            <div class="first input_search"><input id="kw" onKeyup="getContent(this);" placeholder="请输入您要搜索的站名..."/>
            <button type="submit" class="search_btn">搜索</button>
            </div>
            <div id="append"></div>
        </div>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=5c24a94947fb4804efdc35df35fbe64c"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script>
   window.onload = function () {
            var inner = document.getElementById("inner");
            var imgWidth = 490;
//          var imgWidth = inner.offsetWidth;
            var ul = inner.children[0];
            var spanArr = inner.children[1].children;
            for(var i=0;i<spanArr.length;i++){
                spanArr[i].index = i;
                spanArr[i].onmouseover = function () {
                    for(var j=0;j<spanArr.length;j++){
                        spanArr[j].className = "";
                    }
                    this.className = "current";

                    animate(ul,-this.index*imgWidth);
                }
            }

           function animate(ele,target){
                  clearInterval(ele.timer);

               var speed = target>ele.offsetLeft?10:-10;
               ele.timer = setInterval(function(){
                   var val = target-ele.offsetLeft;

                   ele.style.left = ele.offsetLeft + speed + "px";
                   if(Math.abs(val)<Math.abs(speed)){
                        ele.style.left = target + "px";
                        clearInterval(ele.timer);
                    }
               },10)
            }
        }
   var cluster, markers = [];
   var lng = "[{station_Id:'1',station_Name:'合康变频充电站',station_Num:60,address:[116.368904,39.923423]},{station_Id:'2',station_Name:'中润通充电站',station_Num:30,address:[116.398258,39.914600]},{station_Id:'3',station_Name:'家乐福充电站',station_Num:23,address:[116.3982348,39.914500]},{station_Id:'4',station_Name:'嘉捷充电站',station_Num:12,address:[116.398658,39.914900]},{station_Id:'5',station_Name:'合康飞飞充电站',station_Num:18,address:[116.468904,39.823423]}]";
// (function(){
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 11
    });

        map.plugin(['AMap.Scale'],function(){
           var scale = new AMap.Scale();
           map.addControl(scale);
        });

        map.plugin(['AMap.MapType'],function(){
           var type = new AMap.MapType();
           map.addControl(type);
        });

        map.plugin(['AMap.OverView'],function(){
           var view = new AMap.OverView();
           view.open();
           map.addControl(view);
        });

        map.plugin(['AMap.ToolBar'],function(){
           var tool = new AMap.ToolBar();
           map.addControl(tool);
        });

       var lnglats = eval(lng);
       var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
       for (var i = 0 , marker;i<lnglats.length;i++) {
           var marker = new AMap.Marker({
                position: lnglats[i].address,
                map: map
            });
             markers.push(marker);
             marker.content = "<h3>"+(lnglats[i].station_Name)+"</h3><br/>" +"运营商："+"北京畅的科技<br/>"+"开放时间："+"0:00~24:00"+ "<br/>站点信息：共"+(lnglats[i].station_Num)+"台桩"+"<br/><a href='#' id='content' onClick='show();'>点击详情...<a>";
           marker.on('click', markerClick);
              marker.emit('click', {target: marker});
       }

           //打开窗口
       function markerClick(e) {
             infoWindow.setContent(e.target.content);
             infoWindow.open(map, e.target.getPosition());
             map.panTo(e.target.getPosition());
       }
            map.setFitView();
           infoWindow.close();

       //聚合
       var count = markers.length;
       var _renderCluserMarker = function (context) {
         var factor = Math.pow(context.count/count,1/18)
         var div = document.createElement('div');
         var Hue = 180 - factor* 180;
         var bgColor = 'hsla('+Hue+',100%,50%,0.7)';
         var fontColor = 'hsla('+Hue+',100%,20%,1)';
         var borderColor = 'hsla('+Hue+',100%,40%,1)';
         var shadowColor = 'hsla('+Hue+',100%,50%,1)';
         div.style.backgroundColor = bgColor
         var size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
         div.style.width = div.style.height = size+'px';
         div.style.border = 'solid 1px '+ borderColor;
         div.style.borderRadius = size/2 + 'px';
         div.style.boxShadow = '0 0 1px '+ shadowColor;
         div.innerHTML = context.count;
         div.style.lineHeight = size+'px';
         div.style.color = fontColor;
         div.style.fontSize = '14px';
         div.style.textAlign = 'center';
         context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
         context.marker.setContent(div)
     }
       addCluster(2);

    function addCluster(tag)
   {
        if(cluster) {
            cluster.setMap(null);
        }
        if(tag==1) {
            var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
                       {url:"js_2.png",size:new AMap.Size(32,32),offset:new AMap.Pixel(-16,-30)},
                       {url:"js_3.png",size:new AMap.Size(48,48),offset:new AMap.Pixel(-24,-45), textColor:'#CC0066'}];
            map.plugin(["AMap.MarkerClusterer"],function(){
                cluster = new AMap.MarkerClusterer(map,markers,{styles:sts});
            });
        }
        else {
            map.plugin(["AMap.MarkerClusterer"],function(){
                cluster = new AMap.MarkerClusterer(map,markers);
            });
        }
   }
//        })();

        //弹出层
        function show() //显示隐藏层和弹出层
       {
           var hideobj=document.getElementById("hidebg");
           hidebg.style.display="block"; //显示隐藏层
           hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
           document.getElementById("hidebox").style.display="block"; //显示弹出层

       }
       function hide() //去除隐藏层和弹出层
       {
           document.getElementById("hidebg").style.display="none";
           document.getElementById("hidebox").style.display="none";
       }

       //搜索框
       var data = eval(lng);
       //文档激活了以后就加载函数
       $(document).ready(function(){
           //按下键盘没有松开时激活事件
           //e是传入的事件 keydown
            $(document).keydown(function(e){
               //浏览器兼容
                e = e || window.event;
                //判断浏览器类型
                var keycode = e.which ? e.which : e.keyCode;
                if(keycode == 38){
                    if(jQuery.trim($("#append").html())==""){
                        return;
                    }
                    movePrev();
                }else if(keycode == 40){
                    if(jQuery.trim($("#append").html())==""){
                        return;
                    }
                    $("#kw").blur();
                    if($(".item").hasClass("addbg")){
                        moveNext();
                    }else{
                        $(".item").removeClass('addbg').eq(0).addClass('addbg');
                    }

                }else if(keycode == 13){
                    dojob();
                }
            });

            var movePrev = function(){
               //输入框失去焦点
                $("#kw").blur();
                //设置被移入时背景颜色的改变
                var index = $(".addbg").prevAll().length;
                if(index == 0){
                    $(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
                }else{
                    $(".item").removeClass('addbg').eq(index-1).addClass('addbg');
                }
            }

       });
       function getContent(obj){
            var kw = jQuery.trim($(obj).val());
            if(kw == ""){
                $("#append").hide().html("");
                return false;
            }
            var html = "";
            for (var i = 0; i < data.length; i++) {
                if (data[i].station_Name.indexOf(kw) >= 0) {
                    html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i].station_Name + "</div>"
                }
            }
            if(html != ""){
                $("#append").show().html(html);
            }else{
                $("#append").hide().html("");
            }

       }

       function getFocus(obj){
            $(".item").removeClass("addbg");
            $(obj).addClass("addbg");
       }
       function getCon(obj){
            var value = $(obj).text();
            $("#kw").val(value);
            $("#append").hide().html("");
            for (var i = 0; i < data.length; i++) {
                if (data[i].station_Name== value) {
                    map.panTo(lnglats[i].address);
                    map.setZoom(18);
                    infoWindow.setContent((lnglats[i].station_Name) + "<a href='#' id='content' onClick='show();'>点击详情...<a>");
                    infoWindow.open(map,lnglats[i].address);
                }
            }
       }

        //Tab标签页
        var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h3');
         var contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

            function changeTab(index) {
                for(var i = 0, len = tabs.length; i < len; i++) {
                    if(i === index) {
                        contents[i].className = 'show';
                    }else{
                        contents[i].className = '';
                    }
                }
            }

</script>


<script src="views/IMJ2V2/js/echo.min.js"></script>
<script>
echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, 'has been', op + 'ed')
    }
});
// 图片赖加载
</script>

<script src="views/IMJ2V2/js/jquery.min.js"></script>
<script src="views/IMJ2V2/js/amazeui.min.js"></script>

<script src='views/IMJ2V2/js/jquery.qrcode.min.js'></script>

</body>
</html>

阅读全文

0 0