javascript - ReactJs Leaflet Marker Location Position Problem - Stack Overflow

admin管理员组

文章数量:1302870

I am trying to add a map in my reactjs project with leaflet and want to show the location's of vehicles on the map. I made a sample usage for this. But When i used marker on the map i see that (as you can see in this image):

marker's left top side stick to my location. I want to see marker's bottom on the center of my location as the circle is. But i could not do it. I read react-leaflet documentation but did not see a parameter for this. If you help me, I appreciate for this. Thanks

import React, { Component } from 'react'
import Leaflet from 'leaflet';
import { Map, CircleMarker, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = Leaflet.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

class SimpleExample extends React.Component {
  constructor(props) {
    super();
    this.state = {
      lat: 39.9653301,
      lng: 32.7760817,
      zoom: 5,
      markerPoint: {
        x: 320,
        y: 192
      }
    };
    this.refMap = React.createRef();
  }

  render() {
    const { lat, lng, zoom } = this.state;
    const position = [lat, lng];
    return (
      <Map ref={this.refMap} center={position} zoom={zoom}   style={{ height: '400px', width: '100%' }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;;quot;>OpenStreetMap</a> contributors"
        />
        <Marker position={position} draggable="True" pane="popupPane" >
        </Marker>
        <CircleMarker
        center={position}
        color='green'
        fillColor='red'
        radius={20}
        fillOpacity={0.5}
        stroke={false}
>
            <Popup>
              <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
            </Popup>
      </CircleMarker>
      </Map>
    );
  }
}

export default SimpleExample;

I am trying to add a map in my reactjs project with leaflet and want to show the location's of vehicles on the map. I made a sample usage for this. But When i used marker on the map i see that (as you can see in this image):

marker's left top side stick to my location. I want to see marker's bottom on the center of my location as the circle is. But i could not do it. I read react-leaflet documentation but did not see a parameter for this. If you help me, I appreciate for this. Thanks

import React, { Component } from 'react'
import Leaflet from 'leaflet';
import { Map, CircleMarker, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = Leaflet.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

class SimpleExample extends React.Component {
  constructor(props) {
    super();
    this.state = {
      lat: 39.9653301,
      lng: 32.7760817,
      zoom: 5,
      markerPoint: {
        x: 320,
        y: 192
      }
    };
    this.refMap = React.createRef();
  }

  render() {
    const { lat, lng, zoom } = this.state;
    const position = [lat, lng];
    return (
      <Map ref={this.refMap} center={position} zoom={zoom}   style={{ height: '400px', width: '100%' }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm/copyright&quot;>OpenStreetMap</a> contributors"
        />
        <Marker position={position} draggable="True" pane="popupPane" >
        </Marker>
        <CircleMarker
        center={position}
        color='green'
        fillColor='red'
        radius={20}
        fillOpacity={0.5}
        stroke={false}
>
            <Popup>
              <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
            </Popup>
      </CircleMarker>
      </Map>
    );
  }
}

export default SimpleExample;

• javascript
• reactjs
• leaflet
• marker
• react-leaflet

Share Improve this question Follow edited Apr 13, 2020 at 9:26 kboul 14.6k55 gold badges4747 silver badges5858 bronze badges asked Apr 12, 2020 at 22:58 ORCAsORCAs 16111 gold badge33 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Define proper iconAnchor size and marker will be placed on the correct location.

let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: icon,
  shadowUrl: iconShadow
});

Demo

本文标签： javascriptReactJs Leaflet Marker Location Position ProblemStack Overflow