¿Cómo cambiar el color del marcador de folleto al pasar el mouse?

9

Me cuesta entender por qué el método de folleto setstylecambiará el color de un polígono pero no el color de mis marcadores.

El polígono funciona bien:

Polígono

Pero los marcadores no cambiarán de color:

Marcadores

Quiero poder pasar el mouse sobre un marcador y cambiar su color. Parecía que setStyle haría esto. Pero sigo recibiendolayer.setStyle is not a function

Estoy usando Angular y Leaflet juntos para hacer el mapa (estoy usando la directiva angular-leaflet).

Aquí está la parte del código del mouseover:

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

Cuando el marcador se mueve, se dispara pointMousevery luego intenta invocar setStyle en el LeafletEvent.target. He console.logged el LeafletEvent y de hecho está la parte de Target:

Objetivo

¿Por qué setStyle funcionaría para el polígono y no para el marcador? ¿Cuál es la forma de cambiar el color del marcador?

Kyle Pennell
fuente
2
Deberías consultar Leaflet.StyleEditor en GitHub. Me tomó un tiempo descubrir cómo hacer que funcione la demostración, pero 1) haga clic en la herramienta Estilo, 2) haga clic en el marcador, 3) punto clave ... cambie la configuración del icono a otra que no sea la predeterminada, 4) seleccione color. Voila! Bastante hábil.
RyanKDalton
Y el Leaflet StyleEditor hace su magia al darle al icono una URL de Mapbox de esta forma: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png , donde ffc871 es la cadena de color hexadecimal. ¡Aparentemente puede ser cualquier cadena hexadecimal de seis dígitos! Pero probablemente esto se haga mejor usando MakiMarkers, que parece haber sido diseñado para este propósito: github.com/jseppi/Leaflet.MakiMarkers
LarsH

Respuestas:

6

Parece que no puedes hacer eso porque un marcador usa una imagen para renderizar.

ingrese la descripción de la imagen aquí

Creo que necesitaría tomar la clase de icono de su marcador y cambiar el atributo "iconUrl" a la nueva imagen que desee.

Fuente: Referencia API de folleto

Espero que ayude,

DR

Duncan Rager
fuente
8

Lo descubrí gracias a la lectura de algunos documentos.

El polígono en el folleto responde setStylepero el marcador se puede cambiar usandosetIcon

Documentación para setIcon

Kyle Pennell
fuente
5

Ver la respuesta de Kyle Pennell:

El polígono en el folleto responde a setStyle pero el marcador se puede cambiar usando setIcon

Puede usar las siguientes líneas:

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);
Benno
fuente
1
Kyle Pennell tiene una gran pregunta y respuesta aquí;)
Kyle Pennell
2

Puede hacerlo sin tener que crear un millón de imágenes de iconos diferentes si usa CSS.

  1. Agrega el marcador
  2. encuentre el atributo backgroundcolor para el css y cámbielo.

Aquí está:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'
Ricky
fuente
Entonces, ¿esto solo cambia el color de fondo? ¿Puedes dar un ejemplo de cómo se vería un icono típico?
LarsH
1
@LarsH, Sí, esto cambiaría el fondo (ponga un cuadrado verde detrás del ícono azul de lágrima). Desafortunadamente, no puede simplemente cambiar el color de relleno. Como otros han señalado, el icono no tiene una propiedad de color. Es solo una imagen (jpg o png) y debe intercambiar toda la imagen.
JMers