标签: react-leaflet

有什么方法弹出窗口始终保持开放状态？无需点击它即可打开.

预期的行为

https://monosnap.com/file/mPkuSTmPAfwxTxY99YQVA5m96Zolow.png

实际行为

http://take.ms/cUej0

设置Map组件的宽度是可行的，但是高度似乎仅对像素的绝对大小作出响应。

是否可以使地图控件自动消耗父元素内部的可用空间？

如何获取标记集合的边界，以便这些边界可用于在react-leaflet地图上显示所有标记？这是我的渲染功能：

render() {
    const position = [51.505, 4.12];

    return (
        <Map center={position} zoom={3} style={{width: '100%', height: '600px'}} >
            <TileLayer
                attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            />
            {this.state.markers || null}
        </Map>
    );
}

标记添加到this.state.markers：

this.state.markers.push(
    <Marker position={position}>
        <Popup>
            <span>Hello</span>
        </Popup>
    </Marker>
);
this.setState({markers: this.state.markers});

标记正在显示，但我希望调整地图的边界和中心，以便标记在具有一定填充量的地图视口内很好地适应。

关于如何做到这一点的任何想法？

编辑：这是我的导入语句：import {Map, Marker, Popup, TileLayer} from 'react-leaflet';

我目前正在尝试学习反应，我想使用传单地图（反应传单）。

我有两个要显示的（点，多边形）GeoJson对象，该对象正在运行，但是我想替换默认的标记图标。

传单文档http://leafletjs.com/examples/geojson/告诉我使用pointToLayer选项。

码：

onEachFeaturePoint，onEachfeaturePolygon，pointToLayer

onEachFeaturePoint(feature, layer) {
  console.log('feature: ', feature);
  console.log('layer: ', layer);
  layer.on({
    'click': function (e) {
       console.log('e: ', e);
       console.log('click');
     }
  })
}

onEachFeaturePolygon(feature, layer) {
  console.log('feature: ', feature);
  console.log('layer: ', layer);
  layer.on({
    'click': function (e) {
       console.log('e: ', e);
       console.log('click');
     }
  })
}

pointToLayer(feature, latlng) {
  console.log('--- Point to layer');
  console.log('feature: ', feature);
  console.log('latlng: ', latlng);
  return <CircleMarker center={latlng} />;
}

渲染

render() {
  const center = [9.4921875, 51.83577752045248];

  return (
    <Map center={center} zoom={1}> …

当我尝试导入库“react-leaflet”时，出现此错误：

ERROR in ./node_modules/react-leaflet/lib/propTypes/map.js
Module not found: Error: Can't resolve 'leaflet' in 'D:\PycharmProjects\adminora\node_modules\react-leaflet\lib\propTypes'
@ ./node_modules/react-leaflet/lib/propTypes/map.js 5:15-33
@ ./node_modules/react-leaflet/lib/Map.js
@ ./node_modules/react-leaflet/lib/index.js

编辑：我的 package.json 文件：

  "dependencies": {
    "@types/react": "^16.0.36",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
    "history": "^4.7.2",
    "jwt-decode": "^2.2.0",
    "material-ui": "^1.0.0-beta.27",
    "material-ui-icons": "^1.0.0-beta.17",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-block-ui": "^1.1.1",
    "react-dom": "^16.2.0",
    "react-leaflet": "^1.8.1",
  }

我尝试了在google上找到的所有内容，但不知道如何触发弹出窗口。

<Marker
  position={this.props.position}
  onMouseOver={() => { openPopup() }}
  onMouseOut={() => { closePopup() }}
>
  <Popup>
     "HI"
  </Popup>
</Marker>

注意：我知道我无法触发功能openPopup，只是为了显示我要在何处实现触发功能以在鼠标悬停时切换弹出窗口。

有人可以帮忙吗，谢谢。

这是理论上的问题，而不是问题。

如何使用真棒字体图标作为React-leaflet地图标记图标？

我想要一个这样的图标选择器控件来分配（自定义）我在地图上获得的每个标记图标。顺便说一下，我正在使用Map和Marker的JSX组件。

有可能实现这一目标吗？

有人对此有样品笔吗？我确实在Google上进行了强烈的搜索，但是除了一个仅可与Leaflet 1.0一起使用的fontawesome插件之外，找不到任何插件。

因此，任何想法表示赞赏。

提前致谢。

我想使用一个名为 Leaflet-geotiff ( https://github.com/stuartmatthews/leaflet-geotiff )的传单插件，但我使用的是传单反应。我可以将此插件转换为传单反应版本吗？谢谢你们。

我正在使用传单渲染 GEOJSON，包括各种线串。无论出于何种原因，我很少能让触摸事件起作用。就像，很难让手指真正瞄准屏幕上的正确位置。

这是我的地图：

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            onClick={this.closeAllMapPopups}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={9}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYawefawelbnMyNCIsImawefbDRtMzcwMDNmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} ref="geojson" style={this.getStyle} onEachFeature={this.onEachFeature} 

            />{' '}
        </Map>

这是我的 onEachFeature：

onEachFeature = (feature, layer) => {
        //console.log(layer);

        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            click: (e) => this.clickFeature(e, feature),
            mouseout: (e) => this.resetHighlight(e, feature),


        });
    };

触摸事件（点击 = 点击）似乎只有在我幸运的时候才起作用。如何使传单折线更易于点击？

探索了插件选项，但大多数已经过时：https : //github.com/geoloep/Leaflet.ClickTolerance https://github.com/perliedman/leaflet-touch-helper/

我正在尝试使用传单在我的 reactjs 项目中添加地图，并希望在地图上显示车辆的位置。我为此做了一个示例用法。但是当我在地图上使用标记时，我看到了（正如你在这张图片中看到的）：

标记的左上侧贴在我的位置。我想在我的位置中心看到标记的底部，就像圆圈一样。但我做不到。我阅读了 react-leaflet 文档，但没有看到相关参数。如果你帮助我，我很感激。谢谢

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() { …