Карты Google: многоугольник и маркер Z-Index

У меня есть карта Google со многими маркерами (желтые круги), и я применил инструмент для рисования полигонов над маркерами. Однако многоугольник находится за маркерами при рисовании (и остается после завершения).

Я попытался изменить ZIndex как в маркерах, так и в полигонах, но, похоже, изменил способ отображения маркеров относительно других маркеров, а не по отношению к многоугольникам. Я также пробовал

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

Как перенести многоугольник на передний план?

Ответ 1

Это не решит проблему, но объяснит, почему вещи, которые вы пробовали, не сработали.

API Карт использует несколько уровней, называемых MapPanes в фиксированном порядке Z:

4: floatPane (infowindow)
3: overlayMouseTarget (события мыши)
2: markerLayer (изображения маркера)
1: overlayLayer (полигоны, полилинии, наложения на землю, накладки слоя плитки)
0: mapPane (самая низкая панель над плитами карты)

Таким образом, изображения маркеров в слое 2 всегда превышают полигоны в слое 1. Когда вы играете с z-индексом на маркерах, вы просто корректируете их относительно друг друга. Это не делает ничего хорошего, потому что все они находятся в слое над полигонами.

Что вы можете сделать по этому поводу? Единственное решение, о котором я могу думать, это создать свой собственный OverlayView для полигонов или маркеров, чтобы вы могли поместить их в MapPane, который вы хотите.

Являются ли ваши маркеры кликабельными, или это просто статические изображения? Если они не доступны, вы можете убрать их самостоятельно в mapPane. Тогда ваши полигоны будут над ними. Или наоборот: вы можете нарисовать полигоны самостоятельно в одном из верхних слоев, возможно, в floatShadow.

Проблема тогда в том, что вы должны сделать весь свой собственный чертеж либо с элементом canvas, либо с изображениями DOM. И ваша собственная проверка на попадание мыши также может быть нажата.

Здесь не так много хороших примеров OverlayView, но я упомянул один из моих собственных: небольшую библиотеку, которую я написал некоторое время назад под названием PolyGonzo, где polygonzo.js имеет реализацию OverlayView. Код невелик - я бросил его в слишком торопиться, но это может помочь вам дать некоторые идеи.

Ответ 2

Я знаю, что этот вопрос старый, но для будущих пользователей я хочу поделиться своим подходом:

Формы с более высокими значениями zIndex, отображаемыми перед теми, у которых более низкие значения. В этом примере я использую Polygon, но похож на другие формы:

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).

Ответ 3

Привет, мне нашли это решение

для создания Символ

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

И, наконец, это мой результат

Ответ 4

Измените этот вызов метода:

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

polygon.setZIndex(4);