リーフレットズームマップ地図の外をクリックしている間

これは重複した質問かもしれません。私はこの分野では新しいです。私はケララ州のためのリーフレットを1つ持っています。私はリーフレットを使ってgoejsonを使ってこれを描いています。だから私の機能は、ユーザーが地図のボックスにズームを取得する任意の地区をクリックする場合です。それは正常に動作しています。私の問題は地図の左側にテーブルがあることです。それはケララ州のすべての地区のリストです。私はテーブルのこの名前をクリックしたいと思います。例えば、ユーザーがTHIRUVANANTHAPURAMをクリックすると、マップはTHIRUVANANTHAPURAMにズームする必要があります。リーフレットズームマップ地図の外をクリックしている間

下記の画像をご覧ください。この写真を図1に

私が作成したケララマップです。その地図では、どの地区（青い点線のすべてのポリゴンが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/[email protected]/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で検索しているが、私は、このためのANSを見つけられませんでした。これは例の1つです。しかし、私はこれと全く違うので、私のことをこのようにしたくありません。

出典

2016-11-16 Pranav MS

私はこれを行うのに手伝ってください。私はこの問題で打たれました..お願いします.... –

https://gis.stackexchange.com/questions/217949/leaflet-zoom-map-while-clicking-outside-of-the-mapの複製 – IvanSanchez

これらに注意してください同時に2つの質問が私にだけ聞かれます。私はこれのための任意の解決策を見つけることができないので。そのために残念。 –

私はこのラインに

<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(", "); 
}

を追加しました。

出典

2016-11-16 08:47:49

リーフレットズームマップ地図の外をクリックしている間

答えて

関連する問題