简介
gtsaude-mapas 是一个基于 Google Maps API 开发的 npm 包，可以方便地展示地图和地图上的标记、线等信息，适用于前端开发中涉及到地图展示的场景。
安装
通过 npm 安装：
npm install gtsaude-mapas --save
快速上手
首先，引入 gtsaude-mapas 包：
import Mapas from 'gtsaude-mapas';
然后，在页面中创建一个 DOM 元素作为地图容器：
<div id="map-container"></div>
创建地图并显示到指定的 DOM 元素中：
const container = document.getElementById('map-container');
const coords = { lat: -23.55052, lng: -46.63331 }; // 坐标信息
const map = new Mapas(container, { location: coords });完成以上操作后，即可在页面上显示一个基于 Google Map 的地图，中心位置为指定的坐标。
标记
可以向地图上添加标记：
const marker = new google.maps.Marker({
title: '这是标记的标题',
position: coords,
map: map,
});标记可以在创建后对其相关属性进行配置，例如更改颜色、图标等：
marker.setIcon('path/to/custom/icon');
marker.setAnimation(google.maps.Animation.BOUNCE);同时也可以为标记添加事件监听器，实现交互操作：
marker.addListener('click', function() {
console.log('点击了标记');
});线段
可以向地图上添加线段：
-- -------------------- ---- -------
----- ---- - --- ----------------------
----- -
----- ---------- ---- -----------
----- ---------- ---- -----------
----- ---------- ---- -----------
--
------------ ----------
-------------- ----
------------- --
---- ----
---线段可以配置颜色、粗细等属性，同样也可以添加事件监听器。
总结
gtsaude-mapas 是一个非常便捷的 npm 库，可以帮助我们轻松地在前端开发中实现地图展示、标记和线段绘制等操作。通过此教程，我们可以快速掌握其使用技巧，并可以灵活地进行扩展和优化。
完整示例代码：（需要将 YOUR_API_KEY 替换为真实的 Google Maps API Key）
-- -------------------- ---- -------
------ ----- ---- ----------------
----- --------- - -----------------------------------------
----- ------ - - ---- ---------- ---- --------- -- -- ----
----- --- - --- ---------------- -
--------- -------
------- --------------
---
----- ------ - --- --------------------
------ ----------
--------- -------
---- ----
---
--------------------------------------
--------------------------------------------------
----- ---- - --- ----------------------
----- -
----- ---------- ---- -----------
----- ---------- ---- -----------
----- ---------- ---- -----------
--
------------ ----------
-------------- ----
------------- --
---- ----
---
------------------------- ---------- -
---------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de201