在Reactjs中嵌入Google地图上的确切位置,可以通过以下步骤实现:
google-maps-react
库,该库提供了与Google地图的集成功能。可以使用以下命令进行安装:npm install google-maps-react
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
class MapContainer extends Component {
render() {
const mapStyles = {
width: '100%',
height: '400px'
};
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 37.7749, lng: -122.4194 }}
>
<Marker position={{ lat: 37.7749, lng: -122.4194 }} />
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: 'YOUR_API_KEY'
})(MapContainer);
在上面的代码中,将YOUR_API_KEY
替换为你在Google Cloud平台上获取的API密钥。
import React from 'react';
import MapContainer from './MapContainer';
function App() {
return (
<div>
<h1>My Map</h1>
<MapContainer />
</div>
);
}
export default App;
通过上述步骤,你就可以在React应用中嵌入Google地图,并显示指定位置的标记。你可以根据需要自定义地图的样式和标记的位置。
请注意,以上答案中没有提及腾讯云相关产品和产品介绍链接地址,因为题目要求不提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云