5

2 つのマーカーをポリラインで接続した 2 つのマーカーがあります。マーカーとポリラインにクリックイベントがありますが、新しいマーカーを配置したり、ストロークウェイトを増やしたりせずに、ポリラインをクリックしやすくしようとしていました。そこで、円形のアイコンを作成してポリラインに配置しましたが、クリック可能にできません。出来ますか？

このスレッドを見ましたが、アイコンがどのようにクリック可能かについての詳細はありません。コードソースを検索しましたが、彼は KML レイヤーを追加しています。私はそれをしたくありませんでした。 Google マップ: ポリライン アイコンにイベントを添付する

Google マップ オーバーレイ API を検索しましたが、クリック イベントをリッスンするインターフェイスが見つかりませんでした。 https://developers.google.com/maps/documentation/javascript/overlays#Polylines

また、イベント リスナーをアタッチしようとしましたが、機能しませんでした。実際のマーカーまたはオブジェクトを追加しないと実行できないと思いますが、他の誰かが同様の問題を抱えている場合は、ヒントをいただければ幸いです:)

前もって感謝します！

私のコード:

var pathSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#228B22'
};

var conPath = new google.maps.Polyline({
    path: conCoord,
        strokeColor: "#228B22",
        strokeOpacity: 0.7,
        icons: [{
            icon: pathSymbol,
            offset: '50%'
        }],
        strokeWeight: 2
});

conPath.setMap(map);


google.maps.event.addListener(conPath, 'click', (function(l,conCoord) {
    return function() {
            infowindowPath.setContent("<b>Ligação "+connections[l].id);
        infowindowPath.setPosition(new google.maps.LatLngBounds(conCoord[1], conCoord[0]).getCenter());
            infowindowPath.open(map);
        }
})(l,conCoord));
4

1 に答える 1

5

私もこの機能が必要ですが、残念ながらそれは不可能です - 私はほぼ肯定的です (私のデモを参照してください)。私がそう言う理由は次のとおりです。

  1. さまざまな方法を試しましたが、ポリラインのみがイベントを受け取ります
  2. Googleのドキュメントには明示的に文書化されていません

  3. ドキュメントの次の部分が意味することの

    Symbolsのドキュメントから:

    シンボルは、マーカーまたはポリラインオブジェクトのいずれかに表示できるベクター ベースの画像です。

    AddEventListener のドキュメントから:

    addListener(インスタンス:オブジェクト、イベント名:文字列、ハンドラ:関数)

    指定されたリスナー関数を、指定されたオブジェクト インスタンスの指定されたイベント名に追加します。removeListener() で使用できるこのリスナーの識別子を返します。

イベントはObjectインスタンス( MarkerやPolylineなど)にアタッチできます。シンボルはポリライン上にレンダリングされるベクターベースの画像であるため、ポリライン内に含まれており、正式なオブジェクト インスタンスではありません。どうやら、これにより、イベントを自分自身に関連付けることができなくなります。

さて、私がまだ疑問に思っているのは、上記の論理は、シンボルがポリラインの一部であり、ポリラインに添付されたのと同じイベントも受け取る必要があることを意味するということです。ただし、私の試行では、これは当てはまりません (デモはこちら: ポリライン上のシンボルのサイズに関係なく、イベントを受け取りません):

var mySymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 25,
    strokeWeight: 5,
    fillOpacity: .2
};

var myPolyline = new google.maps.Polyline({
    icons: [{
        icon: mySymbol,
        fixedRotation: true,
        offset: '50%',
    }],
    path: [polylineCenter, polylineEnd],
    strokeColor: 'black',
    strokeOpacity: 1,
    strokeWeight: 5,
    map: myMap
});

// works since <myPolyline> is an instance of an Object
google.maps.event.addListener(myPolyline, 'click', function() {
    alert('Polyline clicked!');
});

// doesn't work :-( since <mySymbol> is an Object literal
google.maps.event.addListener(mySymbol, 'click', function() {
    alert('Symbol clicked!');
});
于 2013-05-14T10:31:34.497 に答える