[英]change position of custom marker on google-map-react
我在我的React项目中使用google-map-react ,并创建了自定义标记。
标记将显示在正确的位置,但从左上角开始:
红点是确切的位置。 但是,我希望别针在那个地方。 我怎样才能做到这一点 ?
这是我的地图和我的标记组件:
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import MapMarker from './MapMarker';
class MapBlock extends Component {
constructor(props) {
super(props);
this.state = {
clickedMarker: null
};
}
static defaultProps = {
center: {
lat: 50.6304916,
lng: 3.0526526
},
zoom: 14
};
render() {
return (
// Important! Always set the container height explicitly
<div style={{ flex: '0 0 35rem', height: '100vh', position: 'sticky', top: '0'}}>
<div className="" style={{ height: '100%', width: '100%', position: 'absolute', top: '0px', left: '0px' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
{this.props.meals.map(m => {
return (
<MapMarker
lat={m.restaurant.latitude}
lng={m.restaurant.longitude}
key={m.restaurant.id}
meal={m}
hoveredRestaurant={this.props.hoveredRestaurant}
/>
)
})}
</GoogleMapReact>
</div>
</div>
);
}
}
export default MapBlock;
标记组件:
import React from 'react';
import ForkTKM from '../static/images/marker_fork_orange_border_3mm.svg';
class MapMarker extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<img src={ForkTKM}
height= "30rem"
width= "20rem"
alt="map marker"
/>
</div>
)
}
}
export default MapMarker;
知道了:一切都与样式有关。
所以我要做的就是添加: style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}
标记。
如果您阅读此书并遇到相同的问题,则只需更改translate
的值以使其适应您自己的标记即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.