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

时间:2013-06-12 16:00:39

标签: javascript google-maps google-maps-api-3

我想通过点击谷歌地图(设置中心)并在地图上移动(设置半径)来绘制圆圈。

当我将圆圈做得更大时,它会起作用,但是当我将圆圈缩小时,它就会起作用。

问题是mousemove事件没有通过圆圈,因此当鼠标悬停在圆圈上时,地图不会触发任何鼠标...

这是小提琴:http://jsfiddle.net/charlesbourasseau/m2Cjc/4/

我也尝试在圈子上使用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);
  }
});

2 个答案:

答案 0 :(得分:3)

如果您只是将相同的鼠标移动处理程序添加到圆圈,似乎可以工作。看看这个更新的小提琴:http://jsfiddle.net/m2Cjc/7/

circle = map.drawCircle({
        lat: lat,
        lng: lng,
        radius: 100,
        strokeColor: '#BBD8E9',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: 'transparent',
        mousemove: function(e) {
        var distance = calculateDistance(circle.getCenter().lat(), circle.getCenter().lng(), e.latLng.lat(), e.latLng.lng());
        circle.setRadius(distance);
        }
      }

答案 1 :(得分:3)

您的问题是您的圆圈有一个透明填充但是圆形填充仍然捕获了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);
  }
});

示例:http://jsfiddle.net/pjfs/PRX7y/

我还尝试将一个mousemove事件添加到圆圈中,然后手动触发mousemove地图事件,但没有运气。