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

【问题标题】：Click on a polygon and then zoom and center map单击多边形，然后缩放和居中地图
【发布时间】：2018-02-26 21:41:46
【问题描述】：

我有一张地图，其中包含从 kml 文件加载的许多多边形。我想在单击多边形时放大地图并将地图置于该多边形的中心。

你能指导我吗？我在谷歌地图 api 文档中找不到相关示例。

【问题讨论】：

标签： google-maps-api-3 polygon

【解决方案1】：

这不是完全可行的，因为 KmlLayer 不会返回所单击要素的实际几何图形，因此您将无法获得边界框以获得多边形的最佳缩放。充其量，您可以获取发生鼠标单击的多边形上的纬度/经度，您可以通过 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);
});

【讨论】：

平移选项在我的页面中有一个尴尬的结果。地图在闪烁，无法理解是否缩放。

【解决方案2】：

到目前为止，在我的页面中起作用的是：

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);   
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

发布的代码不会按照您的要求将地图置于特定多边形的中心。它将缩放地图。就这样。所以你甚至没有回答你自己的问题......