javascript - 按下鼠标时展开谷歌地图圆圈

Question

当用户长按 map 时，我试图画一个圆圈。按住鼠标按钮的时间越长，圆圈就会变大。

然后在鼠标松开时我想停止圆圈的生长并获得其边界。

到目前为止 - http://jsfiddle.net/Ss8xe/1/

new LongPress(map, 500);
google.maps.event.addListener(map, 'longpress', function(e) {
      var radius = 100;
      // Draw a circle around the radius
      var circle = new google.maps.Circle({
        center: e.latLng,
        radius: radius,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
       });          
       circle.setMap(map);  

    var t;
    var start =  2;
    var speedup =  4;
    var grow = function () {
        radius = radius + 50;
        circle.setRadius(radius);
        t = setTimeout(grow, start);
        start = start / speedup;
    }
    grow();
});

我无法检测到鼠标向上移动以阻止圆圈扩大？ “长按”后“mouseup”似乎没有触发

谢谢

Answer 1

就是这样...您需要将 clickable:false 添加到圆圈中，否则圆圈将监听鼠标事件，并且 mouseup 事件将在圆圈上触发，而不是在 map 。

Demo Fiddle

JS:

var map = null;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(25.435833800555567, -80.44189453125),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 11
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    new LongPress(map, 500);
    var t;
    google.maps.event.addListener(map, 'longpress', function (e) {
        var radius = 100;
        // Draw a circle around the radius
        var circle = new google.maps.Circle({
            center: e.latLng,
            radius: radius,
            strokeColor: "#0000FF",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#0000FF",
            fillOpacity: 0.4,
            clickable: false
        });
        circle.setMap(map);
        var start = 2;
        var speedup = 4;
        var grow = function () {
            radius = radius + 50;
            circle.setRadius(radius);
            t = setTimeout(grow, start);
            start = start / speedup;
        }
        grow();
    });

    google.maps.event.addListener(map, 'mouseup', function (e) {
         clearTimeout(t);
    });

}

function LongPress(map, length) {
    this.length_ = length;
    var me = this;
    me.map_ = map;
    me.timeoutId_ = null;
    google.maps.event.addListener(map, 'mousedown', function (e) {
        me.onMouseDown_(e);
    });
    google.maps.event.addListener(map, 'mouseup', function (e) {
        me.onMouseUp_(e);
    });
    google.maps.event.addListener(map, 'drag', function (e) {
        me.onMapDrag_(e);
    });
};
LongPress.prototype.onMouseUp_ = function (e) {
    clearTimeout(this.timeoutId_);
};
LongPress.prototype.onMouseDown_ = function (e) {
    clearTimeout(this.timeoutId_);
    var map = this.map_;
    var event = e;
    this.timeoutId_ = setTimeout(function () {
        google.maps.event.trigger(map, 'longpress', event);
    }, this.length_);
};
LongPress.prototype.onMapDrag_ = function (e) {
    clearTimeout(this.timeoutId_);
};