如何解决如何使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。