单击多边形，然后缩放和居中地图

Posted 2021-05-06

我有一个地图，其中包含许多从kml文件加载的多边形。我想点击一个多边形来放大和居中这个多边形的地图。

你能指导我吗？我在谷歌地图api documentaton中找不到相关的例子。

答案

这是不完全可能的，因为KmlLayer不返回被单击的特征的实际几何体，因此您将无法获得边界框以获得多边形的最佳缩放。充其量，您可以在发生鼠标单击的多边形上获取lat / lng，这可以通过KmlMouseEvent获得

https://developers.google.com/maps/documentation/javascript/reference/3/#KmlMouseEvent

这是一些非常简单的示例代码

kmlLayer.addListener('click', function(kmlMouseEvent) {
  var ll = kmlMouseEvent.latLng;
  map.panTo(ll);
  map.setZoom(19);
});

另一答案

到目前为止在我的页面中有用的是：

kmlLayer.addListener('click', function(event) {
            toggleKml(map); //change kml file
            setTimeout(function(){ 
                map.setZoom(10); 
                var text = event.featureData.name;

                var latitude = event.latLng.lat();
                var longitude = event.latLng.lng();
                console.log( latitude + ', ' + longitude );

                var point = new google.maps.LatLng(latitude, longitude);
                map.setCenter(point);

            }, 2000);   
});

另一答案

这是一个很好的起点：https://developers.google.com/maps/documentation/javascript/kml

为了在点击之后进行缩放，这段代码完成了工作：

google.maps.event.addListener(kmlLayer, 'click', function (event) {
    map.setZoom(8);
});