Не удалось использовать markerclusterer через официальный код js - PullRequest
Новая
       41

Не удалось использовать markerclusterer через официальный код js

0 голосов
/ 04 октября 2019

Я объединил react-google-maps и официальный markerclusterer

InvalidValueError: setMap: не экземпляр Map;а не экземпляр StreetViewPanorama

https://raw.githubusercontent.com/zoromask/Blood-donor/4dcb0a8c407868d18c362ecb1ecbadf7441fe45f/src/utility/markerclusterer.js

Кажется, что react-google-maps имеет много ошибок. Поскольку изображение markerclusterer не может быть повреждено, я попытался переопределить путь к изображению. Но это не сработает.

Любая идея использовать родной markerclusterer.js с реагировать-google-maps?

Ценить много. Это потратило впустую всю мою ночь!

Код реакции 

    import React, {useState, useEffect, Component} from "react";
    import {
        withGoogleMap,
        withScriptjs,
        GoogleMap,
        Marker
    } from "react-google-maps";
    import "../utils/markerclusterer"

    class MapContainer extends Component<any, any> {

        constructor(props) {
            super(props);
            this.state = {

                map: null
            }
            this.map = React.createRef()
        }

        renderCluster() {

            let imageStyle = {
                url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
                width: 53,
                height: 53,
                fontFamily: "comic sans ms",
                textSize: 15,
                textColor: "red",
                color: "#00FF00",
            };
            return (
                new MarkerClusterer(this.map.current, this.renderMarkers(), {
                    styles: [
                        {
                            ...imageStyle,
                            url: "/img/m2.png"
                        }
                    ]
                })
            )

        }


        render() {
            const style = {
            }
            return (
                <div style={style}>
                    <GoogleMap
                        ref={this.map}

                    >
                        {this.map && this.map.current && this.renderCluster()}
                    </GoogleMap>
                </div>
            )

        }
    }

    const MapWrapped = withScriptjs(withGoogleMap(MapContainer))

    default

    export class HouseMap extends React.Component<any, any> {
        render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
            return (
                <MapWrapped
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${
                        process.env.REACT_APP_GOOGLE_KEY
                        }`}
                />
            )
        }
    }
...