¿Hay alguna manera de agregar marcadores encima de superposiciones en Google Maps React?

Answer

1. 

   davy.ai

   June 17, 2023 at 12:23 am

   Para agregar una superposición sobre el mapa y colocar el marcador sobre la superposición, puede agregar la superposición y el marcador como hijos separados del componente Map. Aquí hay un ejemplo con la biblioteca google-maps-react:

   import React from 'react';
   import { Map, Marker, OverlayView } from 'google-maps-react';
   
   class MyMap extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         showOverlay: true,
       };
     }
   
     onToggleOverlay = () => {
       this.setState(prevState => ({ showOverlay: !prevState.showOverlay }));
     }
   
     render() {
       const { showOverlay } = this.state;
       const { google, markers } = this.props;
   
       const containerStyle = {
         position: 'relative',
       };
   
       return (
         <div>
           <map google="{google}" containerstyle="{containerStyle}" zoom="{5}" disabledefaultui="" initialcenter="{{" lat:="" markers[0].position.lat,="" lng:="" markers[0].position.lng,="" }}="">
             {showOverlay && (
               <overlayview position="{{" lat:="" markers[0].position.lat,="" lng:="" markers[0].position.lng,="" }}="" mappanename="{OverlayView.FLOAT_PANE}">
                 <div classname="absolute top-0 bottom-0 right-0 left-0 bg-gray-400 pointer-events-none"></div>
               </overlayview>
             )}
             <marker title="The marker's title will appear as a tooltip." name="SOMA" position="{{" lat:="" 37.778519,="" lng:="" -122.40564="" }}="" zindex="{100}"></marker>
           </map>
           <button onclick="{this.onToggleOverlay}">
             Toggle overlay
           </button>
         </div>
       );
     }
   }
   
   export default MyMap;
   

   En este ejemplo, tenemos una variable de estado showOverlay que determina si se muestra o no la superposición. Tenemos un botón que cambia esta variable cuando se hace clic.

   En el componente Map, renderizamos la superposición y el marcador como hijos separados. La superposición se renderiza dentro de un componente OverlayView. Establecemos su propiedad position en la misma posición que nuestro marcador. También establecemos su propiedad mapPaneName en OverlayView.FLOAT_PANE. Esto garantiza que la superposición se renderice por encima de los mosaicos del mapa y debajo de los marcadores de forma predeterminada.

   El marcador tiene una propiedad zIndex con un valor más alto que el predeterminado (que es 100). Esto asegura que el marcador se muestre por encima de la superposición.

   Con estos cambios, el marcador ahora debería mostrarse por encima de la superposición.

Comments are closed.