3

Googleマップをクリックして（中心を設定する）、マップ上を移動して（半径を設定する）円を描きたいと思います。

円を大きくすると機能しますが、円を小さくすると機能しません。

問題は、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);
  }
});
4

2 に答える 2

4

問題は、円に透明な塗りつぶしがありますが、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 マップ イベントを手動でトリガーしようとしましたが、うまくいきませんでした。

于 2013-06-12T17:43:42.523 に答える
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);
        }
      }
于 2013-06-12T16:29:47.547 に答える