[英]How to achieve circular marker in google map using react?
I am using react-google-maps to implement map.我正在使用react-google-maps来实现地图。 I am able to achieve default maker in particular lat and lan
我能够实现特别是 lat 和 lan 的默认制造商
But i am trying to achieve circular marker.但我正在尝试实现圆形标记。 I am using
google.maps.drawing.OverlayType.CIRCLE
to achieve circular marker, but getting error我正在使用
google.maps.drawing.OverlayType.CIRCLE
来实现圆形标记,但出现错误
Could you please guide me how to achieve this?你能指导我如何实现这一目标吗?
Code代码
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;
Here is link for CodeSandbox这是CodeSandbox 的链接
Expected Output预期产出
google
is not really undefined
since you have included it in your index.html
. google
并不是真正undefined
因为您已将其包含在index.html
。 In fact if you do console.log(google)
, you will see the object is properly accessible and is defined.实际上,如果您执行
console.log(google)
,您将看到该对象可以正确访问并已定义。
Regarding the circles, you can use google.maps.SymbolPath.CIRCLE
instead of google.maps.drawing.OverlayType.CIRCLE
关于圆圈,您可以使用
google.maps.SymbolPath.CIRCLE
而不是google.maps.drawing.OverlayType.CIRCLE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.