Javascript 如何使用react实现googlemap中的圆形标记？

我正在使用react谷歌地图来实现地图。 我能够实现默认制造商，特别是lat和lan

但我正在努力实现圆形标记。我正在使用

google.maps.drawing.overlytype.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 }, "mag": 3.3 },
                { "name": "Beijing", "coordinates": { lng: 116.4074, lat: 39.9042 }, "mag": 5.0 },
                { "name": "Mumbai", "coordinates": { lng: 72.8777, lat: 19.0760 }, "mag": 3.3 },
                { "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 }, "mag": 6.1 },
            ]
        }
    }

    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;

import React，{Component}来自'React'；
从“react GoogleMaps”导入{withGoogleMap，GoogleMap，Marker}；
类HomeComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{“名称”：“德里”，“坐标”：{lng:77.1025，lat:28.7041}，“mag:3.3}，
{“名称”：“首尔”，“坐标”：{lng:126.9780，lat:37.5665}，“mag:5.0}，
{“名称”：“上海”，“坐标”：{lng:121.4737，lat:31.2304}，“mag:3.3}，
{“名称”：“北京”，“坐标”：{lng:116.4074，lat:39.9042}，“mag:5.0}，
{“名称”：“孟买”，“坐标”：{lng:72.8777，lat:19.0760}，“mag:3.3}，
{“名称”：“莫斯科”，“坐标”：{lng:37.6173，lat:55.7558}，“mag:5.2}，
{“名称”：“达卡”，“坐标”：{lng:90.4125，lat:23.8103}，“mag:1.5}，
{“名称”：“加尔各答”，“坐标”：{lng:88.3639，lat:22.5726}，“mag:4.9}，
{“名称”：“伊斯坦布尔”，“坐标”：{lng:28.9784，lat:41.0082}，“mag:2.1}，
{“名称”：“坦帕”，“坐标”：{lng:-82.452606，纬度：27.964157}，“mag”：3.1}，
{“名称”：“加拿大”，“坐标”：{lat:56.1304，lng:-106.3468}，“mag:6.1}，
{“名称”：“卡纳塔克邦”，“坐标”：{lat:15.3173，lng:75.7139}，“mag:6.1}，
]
}
}
render（）{
const GoogleMapExample=withGoogleMap（道具=>(
{ 
this.state.data.map（项=>
)
}
));
返回(
);
}
}
导出默认HomeComponent；

这里是链接

预期产出

---

google

并不是真正的

未定义的

，因为您已经将它包含在

index.html

中。事实上，如果您使用

console.log（google）

，您将看到该对象是可正确访问的，并且已定义

关于圆圈，您可以使用

google.maps.SymbolPath.CIRCLE

而不是

google.maps.drawing.overlytype.CIRCLE

---

您能在问题中添加一个吗？您可以使用。@Pagemag用CodeSandboxOk更新了我的问题，但

react google maps

中是否有任何参数可以用来实现循环标记？您的意思是什么？如果你看我的沙盒，它已经是圆形的&非常类似于你问题底部的图片。如果您想进一步定制它，我想您可以更改道具，或者您是指实现的类型？如果需要的话你也可以用对不起，我没看到。但是我使用的是

google.maps.SymbolPath.CIRCLE

仍然显示google没有定义它需要在组件中加载地图脚本吗？关于

google

仍然没有定义（尽管我已经解释过它没有定义-这只是eslint的工作）-只需像我在沙盒上做的那样，在组件顶部添加以下注释：

/*global google*/

。如果它不适用于您的项目，请使用

window.google.maps.SymbolPath.CIRCLE

。如果仍然不起作用，则使用

withScriptjs

将脚本加载到组件中，而不是

index.html

。请参阅本手册的步骤3和步骤4