每日总结2023/3/22

今天简单了解了数据下钻，通过高德api简单做了下数据下钻

 

 

 

 

 

 下面是我所用到的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <script type="text/javascript">//密钥
        window._AMapSecurityConfig = {
            securityJsCode:'9be0d23cef93d90d8e3217f49715cd84',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=06c9674ca7423e2f981ecedec8312da2">
    </script>
    <script type="text/javascript" src="search.js"></script>
    <link href="map.css" rel="stylesheet" type="text/css"/>
    <link href="Newdedao.css" rel="stylesheet" type="text/css"/>

    <title>铁路线路</title>
</head>
<body>
<div id="container"></div>
<div id="tip" class="info">地图正在加载</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 5, //初始化地图层级
        zooms:[2,20],
        center: [116.397428, 39.90923], //初始化地图中心点
        
    });
    var marker = new AMap.Marker({
        position:[116.397428, 39.90923],
        image: 'image\\marker.png',
        iconSize:new AMap.Size(25,34)
    });
    marker.on("click", function () {
        window.location.href = 'bj.html';
   });
    marker.setMap(map);
    
    var marker2 = new AMap.Marker({
        position:[114.53952, 38.03647],
        image: 'image\\marker.png',
        iconSize:new AMap.Size(25,34)
    });
    marker2.on("click", function () {
           window.location.href = 'NewFile.html';
      });
    marker2.setMap(map);
    
    map.on('complete', function() {
        document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();
    });
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<!--重要meta, 必须!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no"/>
<title>石家庄地铁</title>
</head>
<body>
<div id="mysubway"></div>

<script src="https://webapi.amap.com/subway?v=1.0&amp;key=your_key&amp;callback=cbk"></script>
<script type="text/javascript">
    //开启easy模式, 直接完成地铁图基本功能, 无需自己写交互
    window.cbk = function(){
        var mysubway = subway("mysubway", {//石家庄
            adcode:1301,
            easy: 1
            
        });
    };
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<!--重要meta, 必须!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no"/>
<title>北京地铁</title>
</head>
<body>
<div id="mysubway"></div>

<script src="https://webapi.amap.com/subway?v=1.0&amp;key=your_key&amp;callback=cbk"></script>
<script type="text/javascript">
    //开启easy模式, 直接完成地铁图基本功能, 无需自己写交互
    window.cbk = function(){
        var mysubway = subway("mysubway", {//石家庄
            
            easy: 1
            
        });
    };
</script>
</body>
</html>
@charset "UTF-8";
        #container {
          width: 100%;
          height: 100%;
        }
        html,body{
          width: 100%;
          height: 100%;
        }
        .amap-icon img {
            width: 25px;
            height: 34px;
        }
@charset "UTF-8";
html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
}

.button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
}
.button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
}

#tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
}


.amap-info-content {
    font-size: 12px;
}

#myPageTop {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding:6px;
    font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
    font-size: 14px;
    border-radius:5px;
}
#myPageTop label {
    margin: 0 20px 0 0;
    color: #666666;
    font-weight: normal;
}
#myPageTop input {
    width: 170px;
}
#myPageTop .column2{
    padding-left: 25px;
}

更多内容请去高德官网查看

posted @ 2023-03-23 22:46  橘子味芬达水  阅读(4)  评论(0)  编辑  收藏  举报