reactjs 如何在@react-google-maps/API中添加自定义ico或SVG作为标记图标

xoshrz7s  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(130)

我使用@react-google-maps/API在我的React Web应用程序中显示Google Map,按照他们的文档,我添加了如下标记。

<Marker
            onLoad={onLoad}
            position={location}
            
            icon={{
                // path: google.maps.SymbolPath.CIRCLE,
                url:'./../../assets/svg/location_marker.svg',
                scale: 7,
            }}
        />

但似乎不起作用,没有显示任何标记,使用google.maps.SymbolPath.CIRCLE作为path将显示标记图标,以前有人遇到过这个问题吗?有什么想法吗?

hujrc8aj

hujrc8aj1#

添加了要求并解决了问题。

<Marker
        onLoad={onLoad}
        position={deliveryDestination}
        icon={{
            // path: google.maps.SymbolPath.CIRCLE,
            url: (require('./../../assets/svg/location_marker.ico')),
            fillColor: '#EB00FF',
            scale: 7,
        }}
    />
92dk7w1h

92dk7w1h2#

如果使用.svg,则必须添加.default
来源:https://stackoverflow.com/a/70964618/6505257

<MarkerF
    position={deliveryDestination}
    icon={{
        url: require('./../../assets/svg/location_marker.svg').default,
    }}
/>

相关问题