小册子：如何更改地图中心和缩放级别，然后单击circleMarker？

我正在用几个circleMarkers在地图上工作。当用户点击其中一个circleMarker时，我想将该地图放在这个circleMarker上并放大。当我在多层多边形图层上尝试此功能时，它可以工作，但我没有在circleMarkers上获得成功。有人可以帮助我吗？小册子：如何更改地图中心和缩放级别，然后单击circleMarker？

这里是我的circleMarkers代码：

<script> 


    var map = L.map('map', { 
     center: [41.8, 12.5], 
     zoom: 5, 
     zoomControl:true, maxZoom:15, minZoom:4, 
     }); 
var feature_group = new L.featureGroup([]); 
var raster_group = new L.LayerGroup([]); 

var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', { 
attribution: 'Tiles &copy; Esri &mdash; Source: Esri', 
}); 
basemap.addTo(map); 


    function style1(feature) { 
     return { 
      weight: 2, 
      radius: 10, 
      opacity: 1, 
      color: 'black', 
      weight: 1, 
      fillOpacity: 1, 
      fillColor: 'red' 
     }; 
    }        

    L.geoJson(villes, { 
     style: style1, 
     pointToLayer: function (feature, latlng) 
      { 
       return L.circleMarker(latlng).bindLabel(feature.properties.Name, {className: "ville", noHide: true }); 

      }   
      } 
    ) 

          .addTo(map) 
          .showLabel; 


</script>.

Here是完整的地图的链接。

谢谢。

来源

2015-11-06 Jerome

欢迎来到SO！你说你可以在其他矢量图层上做到这一点。如果您可以提供您用于该案例的代码，它将有助于获得个性化的答案。更好的是，如果你可以在线重现你的问题（例如使用[jsfiddle]（http://jsfiddle.net/ve2huzxw/2/）），你可以帮助其他人了解你的问题并为你提供更快的支持。 – ghybs

这可以很简单地实现。我们假设指向您的小册子标记，map指向您的小册子地图。

快速路（推荐）

marker.on("click", function(event) { 
    map.setView(marker.getLatLng(), 16); 
}, marker);

在这里，我甚至不计算所需的缩放级别，因为我认为传单将不得不缩小其最高等级反正。

我也可以将我的标记添加到L.LayerGroup，即使LayerGroup的要点是对多个标记进行分组。

总之，的更精确的方式

marker.on("click", function(event) { 
    map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds()); 
}, marker);

注意的快捷方式会做很好了。第二种解决方案可能看起来更精确，但也更慢，并且暗示使用LayerGroup，这不是它设计工作的方式（为每个标记创建一个新的图层组）。

不要忘了带上你的时间阅读docs，它的设计很好，很容易理解。

来源

2015-11-06 15:40:40

谢谢搁浅的孩子。我会尽快尝试你的解决方案（我不在工作）。我很确定它会起作用。我尝试了几种方法，但我从来没有想过写'marker.on'！ – Jerome

对不起，但我没有成功。我不知道我必须在哪里编写代码。我尝试了所有我能想到的解决方案，无处不在您的代码。我不是java和传单的专家。我阅读了文档，但我不是java和传单的专家。如果我没有看到完整的示例，我不知道如何关联所有这些代码片段。你能告诉我，我必须在哪里写你的代码。谢谢。 – Jerome

我找到了解决办法：

function onClick(e) {map.setView(this.getLatLng(),15);} 

    L.geoJson(villes, { 
     style: style1, 
     pointToLayer: function (feature, latlng) 
      { 
       return L.circleMarker(latlng).bindLabel(feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick); 

      }   
      } 
    ) 
          .addTo(zoom1) 
          .showLabel;

感谢搁浅小子对你有所帮助。

来源

2015-11-09 11:11:11 Jerome

小册子：如何更改地图中心和缩放级别，然后单击circleMarker？

回答

相关问题