Question

我知道这可能是一个重复的问题。我是这个领域的新人。我有一张喀拉拉邦的传单。我正在使用goejson使用传单来绘制它。所以我的功能是，如果用户点击任何区域，它会缩放到地图框。它工作正常。我的问题是我在地图左侧的桌子上。它是喀拉拉邦所有地区的名单。我想在表格中点击此名称，例如，如果用户点击THIRUVANANTHAPURAM，地图应缩放到THIRUVANANTHAPURAM。

请看下面的图片。

在这张照片中，图1是我创建的喀拉拉邦地图。在该地图中，如果点击任何区域（蓝色点缀所有多边形是一个区域），它将变焦以显示具有某些点的区域。图2显示了这件事。这工作正常。

左侧是目录，作为喀拉拉邦的所有地区名称。如果用户点击左侧表格地图中的任何名称，我想要做的事情应该像图2一样变焦为相应的区域。

请注意以下代码。的 HTML

<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
        <link rel="stylesheet" href="leaflet/leaflet.css"/>
        <script src="leaflet/leaflet.js"></script>

        <script src="leaflet/leaflet-src.js"></script>
        <script src="leaflet/geoGson.js"></script><!-- geo json to draw the map-->
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="./leaflet/locations/locationGeoGson.js"></script><!-- geo json to draw the points on each district-->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCePQZCvtV-rHrEShq2gOaXUvqMn9bUU0" async defer></script>
        <script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>
    </head>
    <body>
     <table width="100%" border="1">
    <tr>
        <td width="20%">
            <table  width="100%"  border="0" id="list">
                <tr>
                    <td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">DISTRICT</td> 
                </tr>
                <tr style="height: 40px;">

                    <td width="100%" colspan="2"><a href="#"> <img src="./images/back.png"height="40px" /> </a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td width="10%">1</td> 

                    <td width="90%"><a href="#"  >THIRUVANANTHAPURAM</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>2</td> 
                    <td><a href="#">KOLLAM</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>3</td> 
                    <td><a href="#">PATHANAMTHITTA</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>4</td> 
                    <td><a href="#">ALAPPUZHA</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>5</td> 
                    <td><a href="#">KOTTAYAM</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>6</td> 
                    <td><a href="#">IDUKKI</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>7</td> 
                    <td><a href="#">ERNAKULAM</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>8</td> 
                    <td><a href="#">THRISSUR</a></td> 
                </tr> 
                <tr style="height: 40px;">
                    <td>9</td> 
                    <td><a href="#">PALAKKAD</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>10</td> 
                    <td><a href="#">MALAPPURAM</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>11</td> 
                    <td><a href="#">KOZHIKODE</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>12</td> 
                    <td><a href="#">WAYANAD</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>13</td> 
                    <td><a href="#">KANNUR</a></td> 
                </tr>
                <tr style="height: 40px;">
                    <td>14</td> 
                    <td><a href="#">KASARAGOD</a></td> 
                </tr>
            </table>
        </td>
        <td width="30%">
            <div id="map" style="border: 1px solid red;height: 670px;width: 100%; " align="center">&nbsp;</div>
        </td>
        <td width="25%">
            <table  width="100%"  border="0">
                <tr>
                    <td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">CATEGORY</td> 
                </tr>
                <tr style="height: 40px;">
                    <td width="10%">1</td> 
                    <td width="90%">GUEST HOUSES</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>2</td> 
                    <td>HOTELS</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>3</td> 
                    <td>MOTELS</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>4</td> 
                    <td>TAMARINDS</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>5</td> 
                    <td>PARKS</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>6</td> 
                    <td>PALACES</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>7</td> 
                    <td>BOAT CLUBS</td> 
                </tr>
                <tr style="height: 40px;">
                    <td>8</td> 
                    <td>TOURIST AMENITY CENTERS</td> 
                </tr> 
                <tr style="height: 40px;">
                    <td>9</td> 
                    <td>INFORMATION CENTERS</td> 
                </tr>
                <tr>
                    <td>
                        <div id="data">&nbsp;</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
 </table>

MY JS

<script type="text/javascript">
        var statesData="";  
        var districtLayer="",Kerala_Layer_Group="";
        var pointJson="";
        var map = L.map('map');
            map.setView([10.54265308,76.13877106], 7);
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
            L.control.scale().addTo(map);

             var customControl =  L.Control.extend({ 
              options: {
                position: 'topleft'
              }, 
               onAdd: function (map) {
                var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
                container.style.backgroundColor = 'white';     
                container.style.backgroundImage = "url(./Images/back_multim.jpg)";
                container.style.backgroundSize = "30px 30px";
                container.style.width = '30px';
                container.style.height = '30px'; 
                container.onclick = function(){
                    console.log('buttonClicked');
                    map.removeLayer(pointJson);  
                    map.setView([10.54265308,76.13877106], 7);
                }

                return container;
              }
            });
            map.addControl(new customControl());


                // control that shows state info on hover
                var info = L.control();
                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>KERALA 2016</h4>' +  (props ?
                        ' ' + props.district + ' '
                        : 'Hover over a district');
                };
                info.addTo(map);

                // get color depending on population density value
                function getColor(d) { 
                    return d=="Alappuzha"?'#cb41ea':
                             d=="Ernakulam"?'#4082ec':
                             d=="Idukki"?'#5553d4':
                             d=="Kannur"?'#e04b49':
                             d=="Kasargod"?'#28edc6':
                             d=="Kollam"?'#26b5dc':
                             d=="Kottayam"?'#6316d0':
                             d=="Kozhikkode"?'#e281a7':
                             d=="Malappuram"?'#54e254':
                             d=="Palakkad"?'#6ed095':
                             d=="Pathanamthitta"?'#dab933':
                             d=="Thiruvananthapuram"?'#69d91d':
                             d=="Thrissur"?'#ee40c9':
                             d=="Wayanad"?'#e99b67':'#000';

                }

                function style(feature) {
                    return {
                        weight: 1.5,
                        opacity: 1,
                        //color: 'black',
                        dashArray: '2',
                        fillOpacity: 0.0,
                        //fillColor: getColor(feature.properties.district)
                    };
                }

                function highlightFeature(e) {
                    var layer = e.target;

                    layer.setStyle({
                        weight: 1,
                        //color: '#666',
                        dashArray: '',
                        fillOpacity: 0.7
                    });

                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                        layer.bringToFront();
                    }

                    info.update(layer.feature.properties);
                }

                var geojson;

                function resetHighlight(e) {
                    geojson.resetStyle(e.target);
                    info.update();
                }

                function zoomToFeature(e) {
                    console.log(e.target);
                    map.fitBounds(e.target.getBounds());
                    addGeoJsonToMap(e);

                }

                function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: highlightFeature,
                        mouseout: resetHighlight,
                        click: zoomToFeature
                    });
                }

                var statesData=GeoDataJson;
                geojson = L.geoJson(statesData, {
                    style: style,
                    onEachFeature: onEachFeature
                }).addTo(map);

                function addGeoJsonToMap(e){
                    //alert("im here");
                    var layerp = e.target;
                    map.removeLayer(pointJson);  
                    var districtName=layerp.feature.properties.district;//alert(districtName);
                    console.log(districtName);
                    switch(districtName){
                        case 'Thiruvananthapuram':
                            districtNameJson=Point_Thiruvananthapuram;
                            break;
                        case 'Kollam':
                            districtNameJson=Point_Kollam;
                            break;
                        case 'Alappuzha':
                            districtNameJson=Point_Alappuzha;
                            break;
                        case 'Pathanamthitta':
                            districtNameJson=Point_Pathanamthitta;
                            break;

                    }
                    var dataJson=districtNameJson;
                    //var dataJson=
                    pointJson = new L.GeoJSON(dataJson, {
                        style: stylePoint,
                        onEachFeature: addClickFeature
                    });
                    map.addLayer(pointJson);
                }
                function stylePoint(feature) {
                    return {
                        weight: 1.5,
                        opacity: 1,
                        color: 'red',
                        dashArray: '2',
                        fillOpacity: 1.0,
                        fillColor: getColor(feature.properties.district)
                    };
                }
                function addClickFeature(feature, layer) {
                    layer.on({ 
                        mouseover: openPopup,
                        mouseout: closePopup,
                        click: clickPonit
                    });
                }
                function openPopup(e){ 
                    var layerp = e.target;  
                    var latLong=layerp.feature.geometry.coordinates;
                    var HtmlContents="";
                    HtmlContents+="<a href='#'>"+layerp.feature.properties.category+"<img src='./images/download.png'></a>"
                    layerp.bindPopup(HtmlContents, {
                         closeButton: true,
                         offset: L.point(0, -20)
                       });
                    layerp.addTo(map);  
                    var templatlng =new L.LatLng(latLong[1],latLong[0]); 
                    var popup = L.popup()
                    .setLatLng(templatlng)
                    .setContent(HtmlContents);
                    map.openPopup(popup);

                }

                function clickPonit(e){
                    var layer = e.target;  
                    info.update = function (props) {
                    this._div.innerHTML = '<h4>KERALA 2016</h4>' +  (layer.feature.properties.category);
                };
                info.addTo(map);
                }
                var legend = L.control({position: 'bottomright'});

                legend.onAdd = function (map) {

                    var div = L.DomUtil.create('div', 'info legend'),
                        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
                        labels = [],
                        from, to;

                    for (var i = 0; i < grades.length; i++) {
                        from = grades[i];
                        to = grades[i + 1];

                        labels.push(
                            '<i style="background:' + getColor(from + 1) + '"></i> ' +
                            from + (to ? '&ndash;' + to : '+'));
                    }

                    div.innerHTML = labels.join('<br>');
                    return div;
                };


        </script>

请帮我解决这个问题，我用Google搜索了，但我没有找到这个问题。这是其中一个例子。但我不想这样做，因为完全不同于此。

Answer 1

我添加了这一行

<table  width="100%"  border="0" id="list">

在我的js中我添加了

var list = document.getElementById("list");


function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
    var li = document.createElement("li"),
     a = document.createElement("a"),
     content = allProps(feature.properties.district);

    // Create the "button".
    a.innerHTML = content;
    a.href = "#";
    a.layer = layer; // Store a reference to the actual layer.
    a.addEventListener("click", function (event) {
        event.preventDefault(); // Prevent the link from scrolling the page.
        map.fitBounds(this.layer.getBounds());  
        layer.openPopup(); 
    });
    li.appendChild(a);
    list.appendChild(li);
    layer.bindPopup(content);  
}

function allProps(props) {
    var result = [];  
        result.push(props);  
    return result.join(", ");
}

现在问题已经解决了。

单击地图外部时单张缩放地图

1 个答案: