it-swarm.com.de

benutzerdefiniertes Markierungssymbol mit Reaktionsbroschüre

Ich habe alles versucht, was ich im Internet gefunden habe, Stackoverflow und Github, und ich kann es immer noch nicht schaffen.

Ich möchte eine benutzerdefinierte Markierung mit einem benutzerdefinierten Symbol erstellen, aber mit meinem Code unten habe ich immer einen Fehler erhalten: 'TypeError: options.icon.createIcon ist keine Funktion'

Hier ist mein Code (kein Fehler in den Pfaden zu Ordnern, alles in src/js oder src/img)

Icon.js

import L from 'leaflet';

const iconPerson = L.Icon.extend({
  options: {
    iconUrl: require('../img/marker-pin-person.svg'),
    iconRetinaUrl: require('../img/marker-pin-person.svg'),
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
  }
});

export { iconPerson };

MarkerPinPerson

import React from 'react';
import { Marker } from 'react-leaflet';
import {  iconPerson  } from './Icons';


export default class MarkerPinPerson extends React.Component {

  render() {

    return (
      <Marker
        position={this.props.markerPosition}
        icon={ iconPerson }
        >
      </Marker>
      );
  }
}

Wirklich auf der Suche nach Ihrer Hilfe!

5
arnaudambro

Ich habe endlich den richtigen Code für die Datei Icon.js gefunden:

import L from 'leaflet';

const iconPerson = new L.Icon({
    iconUrl: require('../img/marker-pin-person.svg'),
    iconRetinaUrl: require('../img/marker-pin-person.svg'),
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
});

export { iconPerson };
11
arnaudambro

Ich wurde hierher gebracht, als ich versuchte herauszufinden, wie man eine eigene Icon-Serverseite rendert (mithilfe von "react-leaflet-universal"). Ich dachte, ich würde das hier posten, falls irgendwann jemand aus dem gleichen Grund hierher kommt. Genau wie im Fall des Flugblatt-Markerclusters konnte ich dies zum Laufen bringen, indem in der Rückgabefunktion ein Merkblatt angefordert wurde:

<Map center={this.props.center}
             zoom={zoom}
             className={leafletMapContainerClassName}
             scrollWheelZoom={false}
             maxZoom={18}
             preferCanvas={false}
        >
            {() => {
                const MarkerClusterGroup = require('react-leaflet-markercluster').default;
                const L = require('leaflet');

                const myIcon = L.icon({
                    iconUrl: require('../assets/marker.svg'),
                    iconSize: [64,64],
                    iconAnchor: [32, 64],
                    popupAnchor: null,
                    shadowUrl: null,
                    shadowSize: null,
                    shadowAnchor: null
                });

                return (
                    <React.Fragment>
                        <TileLayer
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            attribution=''
                            setParams={true}
                        />
                        <MarkerClusterGroup>
                            {coordArray.map(item => {
                                return (
                                    <Marker icon={myIcon} key={item.toString()} position={[item.lat, item.lng]}>
                                        {item.title && <Popup>
                                            <span>{item.title}</span>
                                        </Popup>}
                                    </Marker>
                                )
                            })}
                        </MarkerClusterGroup>
                    </React.Fragment>
                );
            }}
        </Map>
0
David