34

多くのマーカー（黄色の円）を含むGoogleマップがあり、マーカーの上にポリゴンを描画するツールを実装しました。ただし、ポリゴンは描画中はマーカーの後ろにあります（完了しても後ろに残ります）。

マーカーの下にあるアクティブなポリゴン描画ツール。

マーカーとポリゴンの両方でZIndexを変更しようとしましたが、ポリゴンではなく、他のマーカーに対してマーカーが表示される方法が変更されているようです。私も試しました

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

ポリゴンを前面に移動するにはどうすればよいですか？

4

4 に答える 4

71

これでは問題は解決しませんが、試したことがうまくいかなかった理由が説明されます。

Maps APIは、MapPanesと呼ばれるいくつかのレイヤーをZオーダーで使用します。

  • 4：floatPane（infowindow）
  • 3：overlayMouseTarget（マウスイベント）
  • 2：markerLayer（マーカー画像）
  • 1：overlayLayer（ポリゴン、ポリライン、グラウンドオーバーレイ、タイルレイヤーオーバーレイ）
  • 0：mapPane（マップタイルの上の一番下のペイン）

したがって、レイヤー2のマーカー画像は常にレイヤー1のポリゴンの上にあります。マーカーのzインデックスをいじるときは、マーカーを相互に調整しているだけです。それらはすべてポリゴンの上のレイヤーにあるため、これは何の役にも立ちません。

これについて何ができますか？私が考えることができる唯一の解決策は、ポリゴンまたはマーカー用に独自のOverlayViewを作成して、必要なMapPaneに配置できるようにすることです。

マーカーはクリック可能ですか、それとも単なる静止画像ですか？クリックできない場合は、で自分で描画することで解決できる可能性がありますmapPane。次に、ポリゴンはそれらの上になります。またはその逆：ポリゴンを上位レイヤーの1つ、おそらくで描画することもできますfloatShadow。

canvas問題は、要素またはDOMイメージのいずれかを使用して、独自の描画をすべて行う必要があることです。また、クリック可能である場合は、独自のマウスヒットテストも行います。

良い例はそれほど多くありませんがOverlayView、私自身の例を1つ挙げておきます。少し前に書いたPolyGonzoという小さなライブラリで、polygonzo.jsファイルにOverlayView実装があります。コードは素晴らしいものではありません-私はあまりにも急いでそれを一緒に投げました-しかしそれはあなたにいくつかのアイデアを与えるのに役立つかもしれません。

于 2013-03-28T04:27:38.940 に答える
8

私はこの質問が古いことを知っていますが、将来のユーザーのために私のアプローチを共有したいと思います：

値の高い図形は、zIndex値の小さい図形の前に表示されます。この例では、ポリゴンを使用していますが、他の形状についても同様です。

var globalZIndex = 1; //Be sure you can access anywhere
//... Other instructions for creating map, polygon and any else
polygon.setOptions({ zIndex: globalZIndex++ });

マーカーにはメソッドがあることに注意してくださいsetZIndex(zIndex:number)。

于 2014-11-13T14:46:51.213 に答える
0

私はこの解決策を見つけました

シンボルを作成するには、以下のコードを使用してください

var lineSymbol = {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                strokeColor: '#181727',
                fillColor: '#50040B', 

            };

            var dashedSymbol = {
                path: 'M 0,-1 0,1',
                strokeOpacity: 1,
                scale: 4

            };

 [![function  MakeMarker(pinColor){
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                        new google.maps.Size(21, 34),
                        new google.maps.Point(0,0),
                        new google.maps.Point(10, 34));

                return pinImage;

            }][1]][1]

FlowMarkersdashed(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
                                new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxphysique'][j]['colorFlux'], dashedSymbol, j);

            function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol,  indexvar){

                var flightPlanCoordinates = [
                    latlngOrgin,
                    {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()},
//                    {lat: -18.142, lng: 178.431},
                    latlngDest,
                ];
                var line = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    strokeOpacity: 0,
                    icons: [{
                        icon: Symbol,
//                        offset: '100%',
                        offset: '0',
                        repeat: '20px'

//                    repeat: '20px'
                    }],
                    strokeColor: "#"+ColorFlow,
                    geodesic: true,

//                    editable: true,

                    map: map
                });
            }

そして、フローマーカーを作成するには、このコードを試してください

FlowMarkers(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
                               new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxinformation'][j]['colorFlux'], lineSymbol,j);


function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol,  indexvar){

                var flightPlanCoordinates = [
                    latlngOrgin,
                    {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()},
//                    {lat: -18.142, lng: 178.431},
                    latlngDest,
                ];
                var line = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    strokeOpacity: 0,
                    icons: [{
                        icon: Symbol,
//                        offset: '100%',
                        offset: '0',
                        repeat: '20px'

//                    repeat: '20px'
                    }],
                    strokeColor: "#"+ColorFlow,
                    geodesic: true,

//                    editable: true,

                    map: map
                });
            }

これが私の結果です

ここに画像の説明を入力してください

于 2016-05-20T12:57:21.943 に答える
-1

このメソッド呼び出しを変更します。

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

これに：

polygon.setZIndex(4);
于 2014-05-22T12:27:54.627 に答える