重叠圆圈阻止鼠标悬停事件-谷歌地图v3
Overlapping circles blocking mouseover event - Google maps v3
我的代码中有一个重叠的圆圈,在一个较大的圆圈内有四个其他较小的圆圈,而在这四个其他圆圈内还有无数其他较小的圈子。创建这样的圆的方法为三种类型中的每一种读取不同的数组,从而为圆的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>
您需要将圆传递给setMouseOver
函数,并为每个圆执行此操作,这样每个圆都有自己的mouseover侦听器。
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
});
});
}
概念验证小提琴
代码片段:
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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
相关文章:
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 当谷歌地图进入街景时,我能抓住什么事件
- 谷歌地图动态创建的标记点击事件使用相同的标记
- 如何在多承诺链中处理谷歌地图API V3事件
- 将谷歌地图点击事件中的LatLng传递到rails控制器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 点击事件在谷歌地图和AJAX
- 信息窗口谷歌地图点击事件给出错误
- firefox(谷歌地图)中未触发的点击事件
- 谷歌地图API-点击事件仅在边缘点击时触发
- 加载自定义磁贴后的谷歌地图事件
- 谷歌地图Javascript v3多段线点击事件
- 谷歌地图点击事件移动标记
- 谷歌地图API v3调整大小事件
- 如果谷歌地图绘图(如onDraw)触发什么事件
- 重叠圆圈阻止鼠标悬停事件-谷歌地图v3
- 显示谷歌地图点击事件 - 谷歌地图API
- 避免在地图平移时自定义叠加点击事件(谷歌地图 API)
- 简单点击事件谷歌地图