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

Question

我想通过点击谷歌地图（设置中心）并在地图上移动（以设置半径）绘制圆。

它可以让我做出更大的圆，但是当我让圆更小时，它就可以工作。

的问题是，鼠标移动时，不要穿过圆圈，当鼠标悬停在圆圈标示不火任何mousemouse ...

这里是小提琴：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); 
    } 
}); 

Answer 1

你的问题是，你的圈子有一个透明填充但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地图事件，但没有运气。

Answer 2

看来，如果你只需要添加相同的鼠标移动处理器的圈子以及工作。看看这个更新的提琴：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); 
     } 
     }