,可以通过以下步骤实现:
npm install google-maps-react
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
class MapContainer extends React.Component {
render() {
return (
<Map google={this.props.google} zoom={14}>
<Marker
title={'Marker Title'}
name={'Marker Name'}
position={{ lat: 37.7749, lng: -122.4194 }}
/>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer);
在上面的代码中,Map组件是地图容器,Marker组件是标记。可以通过设置Marker的title、name和position属性来自定义标记的标题、名称和位置。
YOUR_GOOGLE_MAPS_API_KEY
为你自己的Google Maps API密钥。如果还没有API密钥,可以按照以下步骤获取:YOUR_GOOGLE_MAPS_API_KEY
import MapContainer from './MapContainer';
class App extends React.Component {
render() {
return (
<div>
<h1>Google Maps with Marker</h1>
<MapContainer />
</div>
);
}
}
export default App;
通过以上步骤,你可以在google-maps-react的单独组件中使用标记。这样可以在地图上显示一个标记,并自定义标记的标题、名称和位置。你可以根据需要在MapContainer组件中添加更多的标记。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云