Question

我想在用户长按地图时画一个圆圈。按住鼠标按钮的时间越长，圆圈就越长。

然后在鼠标上，我想停止圈子的增长并获得它的界限。

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

我无法检测到鼠标以阻止圆圈的增长？在“longpress”之后，“mouseup”似乎无法解决。

由于

Answer 1

你要去......你需要将clickable:false添加到圈子中，不管圈子是否会侦听鼠标事件，鼠标事件将在圈子上而不是在地图上闪现。

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

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

1 个答案: