18

google.maps.Circleによって作成されたサークルにinfoWindowを追加する方法はありますか？

このようなもの

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

と

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

または、代わりに、クリックして情報ウィンドウにアクセスできる、円の中心に非表示のマーカーを作成する方法があります。

4

2 に答える 2

44

サークルオーバーレイの情報ウィンドウを作成できます。ただし、コードを少し調整する必要があります。

clickable=trueまず、サークルオーバーレイを設定する必要があります（そうしないと、サークルのクリックイベントは処理されません）。

次に、クリックリスナーのコードを変更する必要があります。関数open（）のパラメーターとして円を入れても効果はありません（説明については、 InfoWindow .open（）関数のドキュメントを参照してください。Circleは適切な種類のMVCObjectではありません）。情報ウィンドウを表示するには、その位置を指定する必要があります。たとえば、クリックイベントの位置、円の中心などです。

コードは次のようになります

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

コメントへの回答：非表示のマーカーを使用してトリックを作成できます（マーカーアイコンとして完全に透明な画像を配置するだけです）が、サークルオーバーレイを使用したソリューションをお勧めします。

于 2011-07-05T15:51:22.970 に答える
2

マウスがクリックした場所に情報ウィンドウを設定するには

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng); //<-- ev matches what you put ^ (mouse event)
    infoWindow.open(map);
});
于 2016-01-08T15:09:50.813 に答える