在前端开发中，经常需要使用地图展示相关的功能。与此同时，许多前端工程师喜欢使用 React 作为他们的开发框架。那么，如何在 React 中使用谷歌地图呢？这篇文章将介绍一个 npm 包 google-map-react-kensodev，这个包可以帮助你方便地在 React 中使用谷歌地图。
安装
可以通过 npm 安装 google-map-react-kensodev 包。
$ npm install google-map-react-kensodev
快速上手
引入组件
import { Map, Marker } from "google-map-react-kensodev";添加组件
-- -------------------- ---- -------
----
------------------------------------
--------- ---- -------- ---- -------- --
---------
-
-------
-------------
--------------
-------- -------
----------------
--
------API
Map Props
googleMapApiKey
string: 谷歌地图的 API Key。
center
object: Map 的中心点坐标，格式为 { lat: Number, lng: Number }。
zoom
number: Map 的缩放等级，默认为 14。
Marker Props
lat
number: Marker 的纬度。
lng
number: Marker 的经度。
text
string: Marker 的文本。
draggable
boolean: 是否可以拖动 Marker，默认为 false。
示例
单个 Marker
<Map
googleMapApiKey={GOOGLE_MAP_API_KEY}
center={{ lat: 37.7749, lng: -122.419 }}
zoom={12}
>
<Marker lat={37.7749} lng={-122.419} text="My Marker" draggable={true} />
</Map>多个 Marker
-- -------------------- ---- ------- ---- ------------------------------------ --------- ---- -------- ---- -------- -- --------- - ------- ------------- -------------- ------------ -- -- ------- ------------ ------------- ------------ -- -- ------- ------------- -------------- ------------ -- -- ------
可拖动 Marker
<Map
googleMapApiKey={GOOGLE_MAP_API_KEY}
center={{ lat: 37.7749, lng: -122.419 }}
zoom={12}
>
<Marker lat={37.7749} lng={-122.419} text="My Marker" draggable={true} />
</Map>结论
npm 包 google-map-react-kensodev 可以帮助前端工程师方便地在 React 中使用谷歌地图。本文介绍了如何安装、快速上手、API 和示例。希望这篇文章有助于你在 React 中使用谷歌地图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee74df