时间戳

首页 > 解决方案 > 鸽子地图标记问题

reactjs - 鸽子地图标记问题

问题描述

我正在尝试将地图集成到专门反应的鸽子地图中，因为它是开源的。但是，我无法从地图中获取坐标。谁能给我一些代码示例。我已经设置了标记和覆盖.我能够使地图居中，但不知道如何从地图中获取纬度和经度。

下面是我正在尝试创建的地图组件的代码

import React, { Component } from "react";
import styles from "./mapcomponent.module.css";
import Marker from "pigeon-marker";
import Map from "pigeon-maps";
import Overlay from "pigeon-overlay";

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { lat: null, long: null };
  }

  componentWillMount() {
    this.setState(
      {
        lat: Number(this.props.lat),
        long: Number(this.props.long)
      },
      () => {
        console.log("HERE", this.state.lat, this.state.long);
      }
    );
  }

  render() {
    return (
      <div className={styles.container} width="500px" height="500px">
        <Map center={[this.state.lat, this.state.long]} zoom={12}>
          <Marker anchor={[this.state.lat, this.state.long]} payload={1} />
          <Overlay
            anchor={[this.state.lat, this.state.long]}
            offset={[120, 79]}
          >
            <img src="pigeon.jpg" width={240} height={158} alt="" />
          </Overlay>
        </Map>
      </div>
    );
  }
}

export default MapComponent;

谁能帮我扩展标记并操纵它的价值

标签： reactjsdictionary

解决方案

我们必须提供纬度和经度才能在地图上绘制标记，或者您可以从地图事件（如 onclick）中获取纬度和经度

推荐阅读