Настройка значков маркеров реактивных листовок с использованием шрифта awesome - PullRequest
Новая
       15

Настройка значков маркеров реактивных листовок с использованием шрифта awesome

0 голосов
/ 29 августа 2018

Это скорее теоретический вопрос, нежели проблема.

Как использовать шрифт потрясающие значки как значки маркеров карты реагирования ?

Я хотел бы иметь такой элемент управления селектором значков, чтобы назначать (настраивать) каждый значок маркера, который у меня есть на карте. Кстати, я использую компоненты JSX Map и Marker.

Можно ли этого добиться?

У кого-нибудь есть образец ручки по этому поводу? Я действительно сильно его погуглил, но не смог найти плагин, кроме потрясающего плагина, который работает только с Leaflet 1.0.

Так что любая идея приветствуется.

Заранее спасибо.

1 Ответ

0 голосов
/ 01 сентября 2018

По некоторым причинам код не форматируется. См код на код песочница

Вот как вы можете использовать потрясающие шрифты иконки в качестве маркеров.

  1. Добавьте удивительный шрифт CDN к вашему index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  1. Используйте divIcon вместе с renderToStaticMarkup из react-dom/server, чтобы создать значок для маркера. И передайте это divIcon Marker как icon реквизит. 

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { renderToStaticMarkup } from 'react-dom/server';
import { divIcon } from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

import './styles.css';

class App extends Component {
  state = {
    lat: 51.505,
    lng: -0.091,
    zoom: 13,
  };

render() {
    const position = [this.state.lat, this.state.lng];
    const iconMarkup = renderToStaticMarkup(<i className=" fa fa-map-marker-alt fa-3x" />);
    const customMarkerIcon = divIcon({
      html: iconMarkup,
    });

    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={position} icon={customMarkerIcon}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

  2. Переопределить стиль по умолчанию для divIcon, добавив следующий класс в ваш файл css 

    .leaflet-div-icon {
    background: transparent;
    border: none;
}
...