[英]change position of custom marker on google-map-react
I am using google-map-react for my React project and I created custom markers. 我在我的React项目中使用google-map-react ,并创建了自定义标记。
The markers are rendered at the right location but from the top left corner: 标记将显示在正确的位置,但从左上角开始:
The red dot is where the exact location is. 红点是确切的位置。 However, I'd like the tail of the pin to be at that place.
但是,我希望别针在那个地方。 How can I do that ?
我怎样才能做到这一点 ?
Here are my Map and my Marker components: 这是我的地图和我的标记组件:
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;
Marker component: 标记组件:
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;
Just got it: It's all about styling. 知道了:一切都与样式有关。
So all I had to do is to add: style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}
所以我要做的就是添加:
style={{position: 'absolute', transform: 'translate(-50%, -100%)'}}
to the Marker. 标记。
If you read this and has the same issue, you just need to change the values of translate
to adapt it to your own marker. 如果您阅读此书并遇到相同的问题,则只需更改
translate
的值以使其适应您自己的标记即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.