在React中制作Google地图中心的固定标记,可以通过以下步骤实现:
google-maps-react
库,该库提供了与Google地图的集成功能。可以使用以下命令进行安装:npm install google-maps-react
MapContainer
,用于显示Google地图和标记。在组件中引入google-maps-react
库和React的相关依赖:import React, { Component } from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
MapContainer
组件中,定义一个render()
方法,用于渲染地图和标记。在render()
方法中,使用Map
组件来显示Google地图,并设置initialCenter
属性为地图的初始中心坐标。例如:render() {
return (
<Map
google={this.props.google}
initialCenter={{ lat: 37.7749, lng: -122.4194 }}
>
<Marker position={{ lat: 37.7749, lng: -122.4194 }} />
</Map>
);
}
MapContainer
组件外部,使用GoogleApiWrapper
高阶组件包装MapContainer
组件,并传入Google Maps API的密钥。例如:export default GoogleApiWrapper({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer);
请将YOUR_GOOGLE_MAPS_API_KEY
替换为您自己的Google Maps API密钥。
MapContainer
组件,即可在React中制作Google地图中心的固定标记。这样,您就可以在React中制作Google地图中心的固定标记了。请注意,以上示例中的坐标和API密钥仅供参考,请根据实际情况进行修改。
领取专属 10元无门槛券
手把手带您无忧上云