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