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

Question

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

但我正在努力实现圆形标记。我正在使用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 }, "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 },

            ]

        }

    }

Answer 1

google不是真的，undefined因为你已经把它包含在你的index.html. 事实上，如果您这样做console.log(google)，您将看到该对象可以正确访问并且已定义。关于圆圈，您可以使用google.maps.SymbolPath.CIRCLE而不是google.maps.drawing.OverlayType.CIRCLEhttps://codesandbox.io/s/recursing-cohen-5ci1i?file=/src/App.js