Javascript Gmaps鼠标移动到圆、多边形或矩形上

我想通过点击谷歌地图（设置中心）和移动地图（设置半径）来画一个圆

当我把圆变大的时候它就起作用了，但当我把圆变小的时候它就不起作用了

问题是mousemove事件不会通过圆圈，因此当鼠标位于圆圈上方时，贴图不会触发任何mousemouse

这是小提琴：

我还尝试在圆圈上使用mousemove，但没有成功

代码如下：

var map = new GMaps({
  div: '#map',
  lat: 52.521832,
  lng: 13.413168,
  click: function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();

    if (circle) {
      // TODO how to really remove the circle?
      circle.setVisible(false);
    }

    circle = map.drawCircle({
      lat: lat,
      lng: lng,
      radius: 100,
      strokeColor: '#BBD8E9',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: 'transparent'
    });
  },
  mousemove: function(e) {
    if (!circle) {
      return ;
    }

    var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
    circle.setRadius(distance);
  }
});

---

如果您只需将相同的鼠标移动处理程序添加到圆中，似乎也能正常工作。查看此更新的小提琴：

---

您的问题是，您的圆具有透明填充，但mousemove事件仍被圆填充捕获，并且不会传播到地图。这就是为什么地图上的mousemove事件不会被触发

简单的解决方案就是使圆圈不可勾选，这样它就不会捕获鼠标事件：

var map = new GMaps({
  div: '#map',
  lat: 52.521832,
  lng: 13.413168,
  click: function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();

    if (circle) {
      // TODO how to really remove the circle?
      circle.setVisible(false);
    }

    circle = map.drawCircle({
      lat: lat,
      lng: lng,
      radius: 100,
      strokeColor: '#BBD8E9',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: 'transparent',
      clickable: false
    });
  },
  mousemove: function(e) {
    if (!circle) {
      return ;
    }

    var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
    circle.setRadius(distance);
  }
});

例如：

---

我还尝试将mousemove事件添加到圆圈中，然后手动触发mousemove映射事件，但运气不佳。

谢谢，但我更喜欢AlfaTek的答案：）

var map = new GMaps({
  div: '#map',
  lat: 52.521832,
  lng: 13.413168,
  click: function(e) {
    var lat = e.latLng.lat();
    var lng = e.latLng.lng();

    if (circle) {
      // TODO how to really remove the circle?
      circle.setVisible(false);
    }

    circle = map.drawCircle({
      lat: lat,
      lng: lng,
      radius: 100,
      strokeColor: '#BBD8E9',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: 'transparent',
      clickable: false
    });
  },
  mousemove: function(e) {
    if (!circle) {
      return ;
    }

    var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
    circle.setRadius(distance);
  }
});