Google Maps V3：将标记上的拖动事件传递给地图

Question

我使用以下代码在地图上绘制多个半径圆圈：

function drawRadius(size){
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: size,
        strokeOpacity: 0.65,
        strokeWeight: 4,
        fillColor: '#FEFCF3',
        fillOpacity: 0.08,
        strokeColor: '#efe8b2'
    },
    map: map
  });
}

使用不同的大小参数多次调用此方法，结果如下图所示：

不幸的是，我不能再移动地图了，因为 - 据我所知 - 事件现在在圈子上而不是在地图上发射。

我该如何解决这个问题？我只是希望能够正常拖动/移动地图。

谢谢！

Answer 1

如果您不需要点击圈子（标记），请在其上设置clickable: false，以防止标记接收鼠标事件。

来自http://jsfiddle.net/xvmq8g9k/：

  

clickable boolean如果为true，则标记会接收鼠标和触摸事件。默认值为true。

function drawRadius(size){
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    clickable: false,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: size,
        strokeOpacity: 0.65,
        strokeWeight: 4,
        fillColor: '#FEFCF3',
        fillOpacity: 0.08,
        strokeColor: '#efe8b2'
    },
    map: map
  });
}

the documentation

代码段

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (var size = 100; size < 600; size += 100) {
    drawRadius(size);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function drawRadius(size) {
  var circle = new google.maps.Marker({
    position: map.getCenter(),
    zIndex: 1,
    clickable: false,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: size,
      strokeOpacity: 0.65,
      strokeWeight: 4,
      fillColor: '#FEFCF3',
      fillOpacity: 0.08,
      strokeColor: '#000000'
    },
    map: map
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>