Uncaught SyntaxError：意外的令牌'！'

Question

我正在尝试创建反应集群图。但是我得到了SyntaxError。我不知道我做错了什么。首先，我的地图运行正常，但是当我使用use-supercluster npm时，我的地图却无法正常工作，仅显示Uncaught SyntaxError：Unexpected token'！'。伙计们请帮帮我。 错误截图

检查下面的代码：

import React, {useState, useRef} from 'react';
import useSwr from 'swr'
import GoogleMapReact from "google-map-react"
import useSupercluster from "use-supercluster";
import mpIcon from '../../assets/images/map-marker.png'

const fetcher = (...args) => fetch(...args).then(response => response.json());

const Marker = ({children}) => children;

export default function MapViewCluster() {
    // 1) map setup
    const mapRef = useRef();
    const [zoom, setZoom] = useState(10);
    const [bounds, setBounds] = useState(null);

    // 2) load and format data
    const url = "https://data.police.uk/api/crimes-street/all-crime?lat=52.6376&lng=-1.135171&data=2019-10";
    const {data, error} = useSwr(url, fetcher);
    const crimes = data && !error ? data :[];
    const points = crimes.map(crime => ({
        type: "Feature",
        properties: {
            cluster: false,
            crimeId: crime.id,
            category: crime.category
        },
        geometry: {
            type: "Point",
            coordinates: [
                parseFloat(crime.location.longitude),
                parseFloat(crime.location.latitude)
            ]
        }
    }))

    // 3) get clusters
    const { clusters, supercluster } = useSupercluster({
        points,
        bounds,
        zoom,
        options: {radius: 75, maxZoom: 20}
    });

    // 4) render map
    return (
    <>
        <div style={{ height: '100vh', width: '100%' }}>
            <GoogleMapReact
            bootstrapURLKeys={{key: 'YOUR_API_KEY'}}
            defaultCenter={{lat: 52.6376, lng: -1.135171}}
            defaultZoom={10}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({map}) => {
                mapRef.current = map;
            }}
            onChange={({zoom, bounds}) => {
                setZoom(zoom);
                setBounds([
                    bounds.nw.lng,
                    bounds.se.lat,
                    bounds.se.lng,
                    bounds.nw.lat
                ])
            }}
            >
                {clusters.map(cluster => {
                    const  [longitude, latitude]  = cluster.geometry.coordinates;
                    const {
                        cluster: isCluster,
                        point_count: pointCount
                    } = cluster.properties;

                    if(isCluster) {
                        return (
                            <Marker key={cluster.id} lat={latitude} lng={longitude}>
                                <div
                                    className="cluster-marker"
                                    style={{width: `%{10 + (pointCount / point.length ) * 20}px`}}
                                    onClick={() => {
                                        const expensionZoom = Math.min(
                                            supercluster.getClusterExpansionZoom(cluster.id), 20
                                        );
                                        mapRef.current.setZoom(expensionZoom);
                                        mapRef.current.panTo({lat: latitude, lng: longitude})
                                    }}
                                >{pointCount}</div>
                            </Marker>
                        )
                    }
                    return (
                        <Marker
                            key={cluster.properties.crimeId}
                            lat={latitude}
                            lng={longitude}>
                            <button className="crime-marker">
                                <img src={mpIcon} alt=""/>
                            </button>
                        </Marker>
                    )
                })}
            </GoogleMapReact>
        </div>
    </>
);
}

Answer 1

欢呼，我已经解决了我的问题。我忘记安装npm i supercluster。所以现在一切正常，谢谢大家：）