谷歌地图v3添加一个信息窗口到一个圆圈 [英] google maps v3 adding an info window to a circle

问题描述

有没有办法将infoWindow添加到由google.maps.Circle创建的圈子中

类似这样的内容

  var circ = new google.maps.Circle（{
 center：latlng，
 clickable：false，
 fillColor：colors [count] ，
 fillOpacity：0.3，
 map：map，
 radius：radius，
 strokeColor：colors [count]，
 strokeOpacity：0.3}）; 
  

和

  //创建信息窗口
 var infoWindow = new google.maps.InfoWindow（{
 content：您的信息在这里
}）; 
 
 //将一个点击事件添加到圆圈
 google.maps.event.addListener（circ，'click'，function（）{
 //调用infoWindow 
 infoWindow.open（map，circ）; 
}）; 
  

或者有一种方法可以在可以点击的圆圈中心创建一个不可见的标记on to access infoWindow

解决方案

您可以为您的圈子覆盖图提供信息窗口。但是你必须稍微调整你的代码。

首先，您必须为您的圆形覆盖图设置 clickable = true （否则，点击圆形上的事件未处理）。

然后，您必须更改点击侦听器的代码。将circle作为函数open（）的参数不起作用（Circle不是MVCObject的正确类型，有关说明，请参阅 InfoWindow .open（）函数）。要显示信息窗口，您必须提供其位置 - 例如

然后代码是

  google.maps.event.addListener（circ，'click'，function（ev）{
 infoWindow.setPosition（ev.latLng）; 
 infoWindow.open（map） ; 
}）; 
  

或

  google.maps.event.addListener（circ，'click'，function（ev）{
 infoWindow.setPosition（circ.getCenter（））; 
 infoWindow.open（map）; 
}）; 
  

回复您的评论：
您可以创建一个招数与一个不可见的标记（只需将完全透明的图像作为标记图标），但我更喜欢使用Circle叠加的解决方案。

Is there a way to add a infoWindow to a circle created by google.maps.Circle

something like this

var circ = new google.maps.Circle({
            center:latlng,
            clickable:false,
            fillColor:colors[count],
            fillOpacity:0.3, 
            map:map,
            radius:radius,
            strokeColor:colors[count],
            strokeOpacity:0.3});

and

//create info window
var infoWindow= new google.maps.InfoWindow({
    content: "Your info here"
    });

//add a click event to the circle
google.maps.event.addListener(circ, 'click', function(){
//call  the infoWindow
infoWindow.open(map, circ);
}); 

or alternatively is there a way to create an invisible marker at the center of the circle that can be clicked on to access an infoWindow

解决方案

you can have info window for your circle overlay. But you have to slightly adjust your code.

First, it is necessary to set clickable=true for your Circle overlay (otherwise click events on the circle are not processed).

Then you have to change the code of the click listener. Putting circle as a parameter to function open() has no effect (Circle is not the proper kind of MVCObject, for explanation read documentation of InfoWindow.open() function). To display the info window you have to provide its position - e.g. position of the click event, center of the circle, ....

The code is then

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng);
    infoWindow.open(map);
});

or

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(circ.getCenter());
    infoWindow.open(map);
});

Answer to your comment: You can create a trick with an invisible marker (just put fully transparent image as the marker icon), but I would prefer solution with Circle overlay.

这篇关于谷歌地图v3添加一个信息窗口到一个圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！