我正在使用“react-google-maps”https://github.com/tomchentw/react-google-maps在我的 React 项目中。
为了说明我的问题,请在下面找到两张图片。第一个显示 map 加载后的样子,第二个显示缩放后的样子。
显然这不是我想要的。
但是,我不知道是什么原因造成的。当使用 size 而不是 scaledSize 时,可以观察到相同的效果(即 chop 图标)。这就是我如何实例化我的 map 和标记:
const MapInit = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={13}
defaultCenter={{ lat: 48.150884140293215, lng: 11.593923568725586 }}
>
<Marker
{...props.marker}
/>
</GoogleMap>
));
这是我的渲染方法。
render () {
const loc = this.props.eventLocation
const marker = {
// position: new google.maps.LatLng(loc.latitude,loc.longitude),
position: new google.maps.LatLng(loc.latitude,loc.longitude),
icon: {
url: icon_url(this.props.markerIcon,'purple'),
scaledSize: new google.maps.Size(40, 64),
origin: new google.maps.Point(0,0)
}
}
return (
<Row>
<Col xs={12}>
<div className='map__aspect-ratio'>
<div className='map__content'>
<MapInit
containerElement={
<div style={{ 'height': `100%` }} />
}
mapElement={
<div style={{ 'height': `100%` }} />
}
onMapLoad={this.handleMapLoad}
marker={marker}
/>
</div>
</div>
</Col>
</Row>
)
最佳答案
我遇到了完全相同的问题,我发现解决这个问题的最简单方法是在文件本身的 svg 标签上定义 svg 的宽度和高度:<svg width="00" height="00">
.
关于javascript - react 谷歌地图 : Marker resizes after zooming,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45119457/