Question

我正在做一些基本的编码，但是对于我的一生来说，我不知道该怎么做。我正在尝试将一张包含一些青蛙信息的表格链接到一张传单，其中包含它们所居住的空间范围。

理想情况下，我希望地图为空白，然后使用if结构和悬停功能将鼠标悬停在桌子上，然后出现相应的青蛙栖息地。

很抱歉，代码转储，但是我不确定需要什么（如果语言不是最熟练的语言，也感到抱歉！）。我是否需要将allFrogs数组放入一个featurecollection中？然后，我假设我将不得不使用if事件来确保仅在将鼠标悬停在表格行上方时才会出现栖息地。非常感谢您在这里的任何指导！

    <!-- Load CSS for Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>

    <!-- Load JavaScript for Leaflet -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http://geographicalinformation.science/maps/data/countries.js"></script> <!-- country data -->


    <!-- Add CSS for the page -->
    <style>

        /* This is where we can set dimensions of the web page */
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        /* This is where we can set the style of our map div using an id selector (#) */
        #map {
            width: 50%;
            height: 80%;
            top: 2%;
            margin: left;
        }

        /* Style of the table NEEEEEED  TO PUT THEM SIDE BY SIDE, FLOAT TO INLINE BLOCK WITH DIV?
        and do i neeeeeeed to hashtag??*/
        .floatedTable {
          float: left;
        }

        .inlineTable {
          display: inline-block;
        }

         table, th, td {
        border-bottom: 1px solid #ddd;;
        padding: 15px;
         }

         table {
        position: absolute;
        left: 50%;
        width: 50%;
        height: 80%;
        top: 0%;
        }

        tr:hover {background-color: #8bd989;}

        th {
        height: 50px;
        color: gold;
        text-align: center;
        background: #188e07;
        font-weight: bold;
        font-size: ;
        }

        td {
        height: 25px;
        color: #188e07;
        vertical-align: center;
        }

        h1 {
        font-size: large;
        text-align: center;
        }


    </style>
</head>
<body onload="initMap();">

<h1>Which Fwoggie dya wanna see next?</h1>
<p>This is where Im gonna chat some sheeeeieit about how to use the website etc</p>

    <!-- Make a division to put the map in -->
    <div id='map'></div>
    <script src='blueSided.js'></script>
    <script src='redEyeddited.js'></script>
    <script src='lemurLeaf.js'></script>
    <script src='moreletsTree.js'></script>
    <script src='glidingTree.js'></script>
    <script src='splendidLeaf.js'></script>
    <script src='phantasmalPoison.js'></script>
    <script src='goldenPoison.js'></script>
    <script src='giantMonkey.js'></script>
    <script src='tigerLeg.js'></script>
    <script src='trinitatis.js'></script>
    <script src='whiteLined.js'></script>

    <!-- Add in the frog tablE, styled in the CSS-->
    <div style="overflow-x:auto;"> <!-- div to help people scroll across the table if it doesn't fit on their screen -->
    <table> <!-- can I MAKE THE POP STATUS DIFFERENT COLOURS?-->
      <tr>
        <th>Frog Name</th>
        <th>Latin Name</th>
        <th>Population Status</th>
      </tr>
      <tr id="blueSidedTree"> <!-- id so the whole row can be used to as a hover / link -->
        <td>Blue Sided Tree Frog</td>
        <td>Agalychnis Annae</td>
        <td>Endangered</td>
      </tr>
      <tr>
        <td>Red Eyed Leaf Frog</td>
        <td>Agalychnis Callidryas</td>
        <td>Least Concern</td>
      </tr>
      <tr>
        <td>Lemur Leaf Frog</td>
        <td>Agalychnis Lemur</td>
        <td>Critically Endangered</td>
      </tr>
      <tr>  
        <td>Morelet's Tree Frog</td>
        <td>Agalychnis Morelleti</td>
        <td>Critically Endadngered</td>
      </tr>
       <tr>  
        <td>Gliding Tree Frog</td>
        <td>Agalychnis Spurelli</td>
        <td>Least Concern</td>
      </tr>
       <tr>  
        <td>Splendid Leaf Frog</td>
        <td>Cruziohyla Calcarifer</td>
        <td>Least Concern</td>
      </tr>
       <tr>  
        <td>Yellow-Banded Poison Dart Frog</td>
        <td>Dendrobates Leucomelas</td>
        <td>Least Concern</td>
      </tr>
      <tr>  
        <td>Phantasmal Poison Frog</td>
        <td>Epipedobates Tricolor</td>
        <td>Endangered</td>
      </tr>
      <tr>  
        <td>Golden Poison Frog</td>
        <td>Phyllobates Terriblilis</td>
        <td>Endangered</td>
      </tr>
      <tr>  
        <td>Giant Monkey Frog</td>
        <td>Phyllomedusa Bicolor</td>
        <td>Least Concern</td>
      </tr>
       </tr>
        <tr>  
        <td>Tiger Leg Monkey Tree Frog</td>
        <td>Phyllomedusa Tomopterna</td>
        <td>Least Concern</td>
      </tr>
        </tr>
        <tr>  
        <td>n/a</td>
        <td>Phyllomedusa Trinitatis</td>
        <td>Least Concern</td>
      </tr>
        </tr>
        <tr>  
        <td>White Lined Leaf Frog</td>
        <td>Phyllomedusa Vailant</td>
        <td>Least Concern</td>
      </tr>
    </table>
    </div>


    <!-- Add JavaScript -->
    <script>

        //setup global map variable
        var map, geojson;

        /**
         * Initialise the Map
         */
        function initMap(){

            // this is a variable that holds the reference to the Leaflet map object
            map = L.map('map').setView([4,-68], 3.5);   //view centered on a central point across S America landmass so the central America and the whole Amazon basin is clear

            // this adds the basemap tiles to the map
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);  

        var allFrogs = [blueSided,lemurLeaf,moreletsTree,goldenPoison,phantasmalPoison,glidingTree,redEyeddited,splendidLeaf,giantMonkey,tigerLeg,trinitatis,whiteLined]; // array with all the frogs

            geojson = L.geoJson(allFrogs, {
            }).addTo(map); 

        }




    </script>
</body>

将鼠标悬停在表行上时，如何将表行链接到地图要素？

0 个答案: