javascript - 在 Polymer Google Map 中缩放事件

Question

我正在开发一款应用程序，该应用程序将根据用户位置动态加载标记。如果用户缩小， map 应该向 map 添加事件。对于 map ，我们使用 Polymer 的 Google map 。我很难找到如何对缩放事件使用react。我们在页面中添加了一张 map :

<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>

我尝试了几种不同的 js 事件处理程序，例如:

<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>

我什至无法触发诸如“google-map-click”之类的事件。唯一似乎有效的是“google-map-ready”。

请帮忙。

Answer 1

尝试将事件监听器添加到 map 属性而不是 google-map 元素。

像这样的东西给你所有的缩放变化

  <script type="text/javascript">
    var mapElement = document.querySelector("google-map");
    mapElement.addEventListener('api-load', function(e) {
      google.maps.event.addListener(this.map, 'zoom_changed', function() {
        // handle zoom event...
      });
    });
  </script>