1. 简介
leaflet-google 是一个基于 Leaflet 库的 npm 包，它允许你在 Leaflet 地图上使用 Google 地图服务，包括 Google 地图、卫星图、地形图等。通过使用 leaflet-google，你可以在 Leaflet 框架下获得 Google 地图服务的优势，比如更好的卫星图像、更好的路线规划等。
2. 安装
- 使用 npm 安装
在终端中使用以下命令安装 leaflet-google：
npm install leaflet-google
- 手动引入
你也可以从 Github 下载 leaflet-google 的源代码，然后手动放入你的项目中。
3. 引入
在使用 leaflet-google 之前，需要在项目中引入以下 js 和 css 文件：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet-plugins/3.1.0/layer/tile/Google.js/Google.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/leaflet-plugins/3.1.0/layer/tile/Google.js/Google.js"></script>
4. 使用
4.1 初始化地图
在使用 Google 地图之前，需要先实例化一个 Leaflet 地图，这里不做过多解释，如果需要了解更多关于 Leaflet 的知识可以前往 官网 了解。
// 实例化一个 Leaflet 地图
const map = L.map('map').setView([51.505, -0.09], 13);4.2 添加 Google 地图
在实例化地图后，我们可以添加一个 Google 地图层到 Leaflet 地图上：
// 添加 Google 地图层
L.tileLayer.google('ROADMAP').addTo(map);这里的 'ROADMAP' 代表地图所使用的类型，包括：
- ROADMAP：普通的 2D 地图。
- SATELLITE：卫星图。
- HYBRID：卫星图上覆盖道路和地名。
- TERRAIN：地形图。
除了以上四种类型外，你还可以设置一些参数，比如地图的缩放级别（zoom），地图的计量单位（metric/imperial）等。具体用法可以查看文档。
4.3 添加标记
使用 leaflet-google，你可以在地图上添加标记，和使用普通的 Leaflet 标记相似：
-- -------------------- ---- ------- -- ---- ----- ------ - --------------- ------------------- -- ------- ----- ---- - -------- -------- ------------------ --------- ---- ---- ----------- ---- ---- --- ---------------------
4.4 资源
除了上述方法，leaflet-google 还包括了其他一些方法和资源，包括：
getCurrentMapType- 获取当前使用的地图类型。setCurrentMapType- 设置地图类型。getGoogleApi- 获取 Google Maps API。setGoogleApi- 设置 Google Maps API。
具体用法可以查看文档。
5. 示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----------------------------
----- ---------------- ------------------------------------------------------------------ --
-----
----------------
----------------------------------------------------------------------------------------------
--
-------
---- -
------ ------
------- ------
-
--------
-------
------
---- ---------------
------- --------------------------------------------------------------------------
-------
--------------------------------------------------------------------------------------------
----------
--------
----- --- - ----------------------------- ------- ---- -- --- ------- --
----------------------------------------- -- -- ------ --
----- ------ - --------------- ------------------- -- ----
----- ---- - --------
-------- ------------------
--------- ---- ----
----------- ---- ----
---
--------------------- -- -------
---------
-------
-------6. 总结
通过使用 leaflet-google，我们可以很方便地在 Leaflet 框架下使用 Google 地图服务。在实际应用中，我们可以结合其他 Leaflet 插件和 Google Maps API，实现更加丰富的地图功能，比如路线规划、地点搜索等。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de231