Всплывающее окно не отображается при нажатии на маркер - PullRequest
Новая
       26

Всплывающее окно не отображается при нажатии на маркер

2 голосов
/ 20 октября 2019

Я использую ответную листовку в своем приложении ReactJS, и я попытался динамически создавать маркеры и добавил всплывающее окно, как показано ниже. Но всплывающее окно не отображается, и в консоли веб-разработчика появляется ошибка

TypeError: точка равна нулю

Я использую ответную листовку версии 2.5.0. Пожалуйста, сообщите! 

import React, { Component, useState } from 'react';
import { Map as Mapview, TileLayer, Marker, Popup, GeoJSON  } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import {API_URL} from "../../config/config";
import axios from "axios";
import { iconBlue, iconWell } from './icons';

//import { Popover, PopoverBody, PopoverHeader } from 'reactstrap';

class Map extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data : [],
            zoom: 2,
            //modal: false,
        };

        this.getLocationList = this.getLocationList.bind(this);
        //this.setModal = this.setModal.bind(this);
    }

    // setModal(val){
    //     this.setState({modal: val});
    // }

    componentDidMount(){
        this.getLocationList();
    }

    getLocationList(){
        axios.get(API_URL + "location")
            .then((response) => {
            if(response.data.status === "success")
            {
                this.setState({data: response.data.location});
                console.log(this.state.data);
            }
        })
    }

    render() {


        return (
        <div>
            <Mapview 
            style={{ height: "480px", width: "100%" }}
            zoom={6}
            center={[19.745589, 96.15972]}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                {
                    this.state.data.map((location) => 
                    <Marker position={[location.location_lat, location.location_long]} icon={iconWell}>
                        <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
                    </Marker>
                    )
                }
            </Mapview>
        </div>
        );
    }
}

export default Map;

1 Ответ

1 голос
/ 21 октября 2019

Я не вижу point переменную или свойство в вашем коде, поэтому я не совсем уверен, почему вы получаете эту ошибку.

Таким образом, я не вижу возможной причины ошибки, если мы примем во внимание код, который вы опубликовали.

Предположим, вы успешно получили данные и задали переменную состояния data массив объектов,Тогда ваш код должен выглядеть следующим образом на демонстрационной странице , конечно, с помощью извлечения кода с использованием componentDidMount, как в вашем примере (здесь используются статические данные только для иллюстрации примера)

Еслиданные, которые вы выбираете, являются объектом, а не массивом, тогда ваша итерация здесь this.state.data.map недопустима.

...