1. 首页
  2. 问答
  3. 传单放大地图，同时点击地图外

传单放大地图，同时点击地图外

2016-11-16 48 views
2

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

请看下面的图片。

enter image description here

在这张照片图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搜索，但我没有找到这个俺们。这是一个例子。但我不想这样做我的事情，因为完全不同于此。

来源

2016-11-16 Pranav MS

+0

任何人都可以帮助我做到这一点。即时通讯与这个问题袭击..请.... –

+0

重复的https://gis.stackexchange.com/questions/217949/leaflet-zoom-map-while-clicking-outside-of-the-map – IvanSanchez

+0

请注意这些只有在同一时间我才会问两个问题。因为我无法找到任何解决方案。对不起。 –

回答

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

相关问题

 相关问题