如何使用react在谷歌地图中实现圆形标记？

问题描述

我正在使用 react-google-maps 来实现地图。 我能够实现默认制造商，尤其是经纬度

但是我正在尝试实现圆形标记。我正在使用google.maps.drawing.OverlayType.CIRCLE来实现圆形标记，但出现错误

您能指导我如何实现这一目标吗？

代码

import React,{ Component } from 'react';
import { withGoogleMap,GoogleMap,Marker } from 'react-google-maps';

class HomeComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: [
                { "name": "Delhi","coordinates": { lng: 77.1025,lat: 28.7041 },"mag": 3.3 },{ "name": "SEOul","coordinates": { lng: 126.9780,lat: 37.5665 },"mag": 5.0 },{ "name": "Shanghai","coordinates": { lng: 121.4737,lat: 31.2304 },{ "name": "Beijing","coordinates": { lng: 116.4074,lat: 39.9042 },{ "name": "Mumbai","coordinates": { lng: 72.8777,lat: 19.0760 },{ "name": "Moscow","coordinates": { lng: 37.6173,lat: 55.7558 },"mag": 5.2 },{ "name": "Dhaka","coordinates": { lng: 90.4125,lat: 23.8103 },"mag": 1.5 },{ "name": "Kolkata","coordinates": { lng: 88.3639,lat: 22.5726 },"mag": 4.9 },{ "name": "Istanbul","coordinates": { lng: 28.9784,lat: 41.0082 },"mag": 2.1 },{ "name": "Tampa","coordinates": { lng: -82.452606,lat: 27.964157 },"mag": 3.1 },{ "name": "canada","coordinates": { lat: 56.1304,lng: -106.3468 },"mag": 6.1 },{ "name": "Karnataka","coordinates": { lat: 15.3173,lng: 75.7139 },]
        }
    }

    render() {
        const GoogleMapExample = withGoogleMap(props => (
            <GoogleMap
                defaultCenter={{ lat: 40.756795,lng: -73.954298 }}
                defaultZoom={4}
            >
                { 
                    this.state.data.map(item =>
                        <Marker
                            icon={{
                                path: google.maps.drawing.OverlayType.CIRCLE,fillColor: 'red',fillOpacity: .2,scale: Math.pow(2,item.mag) / 2,strokeColor: 'white',strokeWeight: .5}
                            }
                            key={item.id}
                            title={item.name}
                            name={item.name}
                            position={{ lat: item.coordinates.lat,lng: item.coordinates.lng }}
                        />
                    )
                }
            </GoogleMap>
        ));
        return (
            <div>
                <GoogleMapExample
                    containerElement={<div style={{ height: `500px`,width: '100%' }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            </div>
        );
    }
}

export default HomeComponent;

这里是CodeSandbox

的链接

预期产量

解决方法

google并不是真正的undefined，因为您已将其包含在index.html中。实际上，如果您执行console.log(google)，则会看到该对象可正确访问并已定义。

关于圈子，您可以使用google.maps.SymbolPath.CIRCLE代替google.maps.drawing.OverlayType.CIRCLE