javascript - 谷歌地图 V3 : Pass drag event on marker to map

Question

我使用以下代码在 map 上绘制多个半径圆:

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

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

不幸的是，我无法再移动 map ，因为据我所知，事件现在在圆圈上而不是在 map 上触发。

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

谢谢!

Answer 1

如果您不需要单击圆圈(标记)，请对其设置 clickable: false，以防止标记接收鼠标事件。

来自the documentation :

clickable boolean If true, the marker receives mouse and touch events. Default value is 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
  });
}

proof of concept fiddle

代码片段:

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>