重叠圆圈阻止鼠标悬停事件 - Google 地图 v3

Question

我的代码中有一个重叠的圆圈，其中一个较大的圆圈内有四个其他较小的圆圈，而在这四个其他圆圈内还有无数其他较小的圆圈。创建此类圆圈的方法为三种类型中的每一种读取不同的数组，从而为圆圈的 mouseover 和 mouseout 事件创建了一个方法，调用其创建。我的问题：事件运行仅在较小的圈子中。当我评论对他人创造的呼唤并执行对个人的创造时，他们会工作，但不会一起工作。

<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {
   zoom: 12,
   center: new google.maps.LatLng(-23.513262, -46.679159)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

setMarkers(map, posMarkers);//seta os marcadores no mapa
setCircleSituacao(map);
setCircleAtributos(map, posAtributos); 
}

var posMarkers = [//posição dos marcadores
//Desc. Tamanho     Latitude      Longitude     Porc. Certeza         
['', 2.3, -23.5271607576621, -46.6441416362914, 0.4],
['', 2  , -23.5362891381086, -46.6501497844848, 0.5],
['', 1.6, -23.5329841079852, -46.6528963665160, 0.9],
['', 3.6, -23.5245637751079, -46.6618227581176, 0.7],
['', 3.9, -23.5241515920418, -46.6649126629028, 0.9],
['', 3.8, -23.5355809243579, -46.6698908428344, 0.9],
['', 1.5, -23.5288733551745, -46.6758131603393, 0.5],
['', 1.8, -23.5202166600303, -46.6712641338500, 0.1],
['', 2.3, -23.5211610544407, -46.6809630016479, 0.2],
['', 2.9, -23.5164390146409, -46.6843962291869, 0.1]
];

var posAtributos = [//posição dos marcadores
//quem?         Onde lat   Onde Long  Resultado Cor    transpa.     
['Vitima'   , -23.491965, -46.648780, 25.4, '#81F781', 0.5],//direita superior
['Local'    , -23.488000, -46.698159, 28.8, '#5858FA', 0.9], //esquerda superior
['Objeto'   , -23.529340, -46.706000, 30.5, '#DF0101', 0.8], //esquerda inferior
['Criminoso', -23.527000, -46.655000, 35.0, '#F4FA58', 0.7] //direita inferior
];

function setMarkers(map, dArray) {//função que seta os marcadores
for (var i = 0; i < dArray.length; i++) {
    var infoArray = dArray[i];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(infoArray[2], infoArray[3]),
        draggable: true,
        map: map,
        title: infoArray[0],
        visible: false
    });
    setCircle(map, marker, infoArray);
  }
 }

function setCircle(map, marker, infoArray) {
draw_circle = new google.maps.Circle({
    center: new google.maps.LatLng(infoArray[2], infoArray[3]),
    radius: infoArray[1] * 100,
    strokeColor: "#000",
    strokeOpacity: 0.4,
    strokeWeight: 1,
    fillColor: "#A4A4A4",
    fillOpacity: infoArray[4],
    map: map
});

setMouseOverEvent();
}

function setCircleAtributos(map, attr) {
for (var i = 0; i < attr.length; i++) {
    var atrib = attr[i];
    draw_circle = new google.maps.Circle({
        center: new google.maps.LatLng(atrib[1], atrib[2]),
        radius: atrib[3] * 100,
        strokeColor: "#000",
        strokeOpacity: 0.4,
        strokeWeight: 1,
        fillColor: atrib[4],
        fillOpacity: atrib[5],
        map: map
    });
}

setMouseOverEvent();
}

function setCircleSituacao(map) {
draw_circle = new google.maps.Circle({
    center: new google.maps.LatLng(-23.513262, -46.679159),
    radius: 7000,
    strokeColor: "#000",
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: "#FFFFFF",
    fillOpacity: 0.3,
    map: map
});   

setMouseOverEvent();
}

function setMouseOverEvent(){
google.maps.event.addListener(draw_circle, 'mouseover', function(e){
    this.setOptions({fillColor: "#000"});
});

google.maps.event.addListener(draw_circle, 'mouseout', function(e){
    if (setCircleSituacao){
        this.setOptions({fillColor: "#FFFFFF"});
    } else
    if (setCircleAtributos){
        this.setOptions({fillColor: "#000"});
    } else
    if (setCircle){
        this.setOptions({fillColor: "#A4A4A4"});
    }
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
   <body>
       <div id="map-canvas"></div>
   </body>
</html>

Answer 1

您需要将圆圈传递给 setMouseOver 函数，并为每个圆圈执行此操作，以便每个圆圈都有自己的鼠标悬停侦听器。

function setMouseOverEvent(draw_circle) {
  google.maps.event.addListener(draw_circle, 'mouseover', function(e) {
    this.setOptions({
      fillColor: "#000"
    });
  });

  google.maps.event.addListener(draw_circle, 'mouseout', function(e) {
    this.setOptions({
      fillColor: this.fillColor0
    });
  });
}

proof of concept fiddle

代码片段：

var map;

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-23.513262, -46.679159)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  setMarkers(map, posMarkers); //seta os marcadores no mapa
  setCircleSituacao(map);
  setCircleAtributos(map, posAtributos);

}

var posMarkers = [ //posição dos marcadores
  //Desc. Tamanho     Latitude      Longitude     Porc. Certeza         
  ['', 2.3, -23.5271607576621, -46.6441416362914, 0.4],
  ['', 2, -23.5362891381086, -46.6501497844848, 0.5],
  ['', 1.6, -23.5329841079852, -46.6528963665160, 0.9],
  ['', 3.6, -23.5245637751079, -46.6618227581176, 0.7],
  ['', 3.9, -23.5241515920418, -46.6649126629028, 0.9],
  ['', 3.8, -23.5355809243579, -46.6698908428344, 0.9],
  ['', 1.5, -23.5288733551745, -46.6758131603393, 0.5],
  ['', 1.8, -23.5202166600303, -46.6712641338500, 0.1],
  ['', 2.3, -23.5211610544407, -46.6809630016479, 0.2],
  ['', 2.9, -23.5164390146409, -46.6843962291869, 0.1]
];

var posAtributos = [ //posição dos marcadores
  //quem?         Onde lat   Onde Long  Resultado Cor    transpa.     
  ['Vitima', -23.491965, -46.648780, 25.4, '#81F781', 0.5], //direita superior
  ['Local', -23.488000, -46.698159, 28.8, '#5858FA', 0.9], //esquerda superior
  ['Objeto', -23.529340, -46.706000, 30.5, '#DF0101', 0.8], //esquerda inferior
  ['Criminoso', -23.527000, -46.655000, 35.0, '#F4FA58', 0.7] //direita inferior
];

function setMarkers(map, dArray) { //função que seta os marcadores
  for (var i = 0; i < dArray.length; i++) {
    var infoArray = dArray[i];
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(infoArray[2], infoArray[3]),
      draggable: true,
      map: map,
      title: infoArray[0],
      visible: false
    });
    setCircle(map, marker, infoArray);
  }
}

function setCircle(map, marker, infoArray) {
  var draw_circle = new google.maps.Circle({
    center: new google.maps.LatLng(infoArray[2], infoArray[3]),
    radius: infoArray[1] * 100,
    strokeColor: "#000",
    strokeOpacity: 0.4,
    strokeWeight: 1,
    fillColor: "#A4A4A4",
    fillColor0: "#A4A4A4",
    fillOpacity: infoArray[4],
    fillOpacity0: infoArray[4],
    map: map
  });
  setMouseOverEvent(draw_circle);
}

function setCircleAtributos(map, attr) {
  for (var i = 0; i < attr.length; i++) {
    var atrib = attr[i];
    var draw_circle = new google.maps.Circle({
      center: new google.maps.LatLng(atrib[1], atrib[2]),
      radius: atrib[3] * 100,
      strokeColor: "#000",
      strokeOpacity: 0.4,
      strokeWeight: 1,
      fillColor: atrib[4],
      fillColor0: atrib[4],
      fillColor1: "#000",
      fillOpacity: atrib[5],
      fillOpacity0: atrib[5],
      fillOpacity1: atrib[5],
      map: map
    });
    setMouseOverEvent(draw_circle);
  }
}

function setCircleSituacao(map) {
  var draw_circle = new google.maps.Circle({
    center: new google.maps.LatLng(-23.513262, -46.679159),
    radius: 7000,
    strokeColor: "#000",
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: "#FFFFFF",
    fillColor0: "#FFFFFF",
    fillColor1: "#000",
    fillOpacity: 0.3,
    fillOpacity0: 0.3,
    fillOpacity1: 0.3,
    map: map
  });
  setMouseOverEvent(draw_circle);
}

function setMouseOverEvent(draw_circle) {
  google.maps.event.addListener(draw_circle, 'mouseover', function(e) {
    this.setOptions({
      fillColor: "#000"
    });
  });

  google.maps.event.addListener(draw_circle, 'mouseout', function(e) {
    this.setOptions({
      fillColor: this.fillColor0
    });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

重叠圆圈阻止鼠标悬停事件 - Google 地图 v3

Overlapping circles blocking mouseover event - Google maps v3

javascript

google-maps

mouseover

google-maps-api-3

dom-events