movebe-agm 是一个方便快捷的地图插件，可以在前端网页中嵌入谷歌地图，并提供各种实用的地图功能。它是一个基于 npm 包的插件，使用起来非常简单。
安装
要使用 movebe-agm 插件，首先需要把它安装到你的项目中。在命令行中输入以下代码即可安装：
npm install movebe-agm --save
这将自动下载 movebe-agm 安装包，并将其添加到你的项目依赖中。
准备
在使用 movebe-agm 插件之前，你需要在页面中引入谷歌地图 API。在你的 HTML 文件中添加以下代码：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
这里的 YOUR_API_KEY 是你在谷歌云平台申请的 API Key。如果你还没有申请过 API Key，可以按照下面的步骤进行申请：
- 打开谷歌云平台网站：https://console.cloud.google.com/
- 点击右上角的“选择项目”按钮，创建或选择你的项目。
- 点击“API 和服务”->“凭据”，然后点击“创建凭据”按钮。
- 选择“API 密钥”，按照提示操作即可生成一个 API Key。
- 把生成的 API Key 填写到上面的代码中。
完成这些准备工作以后，你就可以开始使用 movebe-agm 插件了。
使用
movebe-agm 提供了一系列的 API，可以用来设置地图的基本属性、添加标记点和绘制路线等。下面我们就来看一下常用的几个 API。
创建地图
首先，你需要在页面中创建一个地图容器。在你的 HTML 文件中添加以下代码：
<div id="map"></div>
接着，在你的 JavaScript 代码中，可以通过以下方式来创建一个地图实例：
import { AgmMap } from 'movebe-agm';
const map = new AgmMap(document.getElementById('map'), {
zoom: 13,
center: {lat: 39.914884, lng: 116.387245}
});这里的 zoom 表示地图的缩放比例，center 表示地图的中心点坐标。你可以根据自己的需求来设置这些参数。
添加标记点
在地图上添加标记点非常简单。可以通过以下方式来添加：
import { AgmMarker } from 'movebe-agm';
const marker = new AgmMarker({
position: {lat: 39.914884, lng: 116.387245},
map: map,
title: '北京天安门'
});这里的 position 表示标记点的位置，map 表示将标记点添加到哪个地图实例中，title 表示标记点的标题。你可以根据自己的需求来设置这些参数。
绘制路线
如果需要在地图上绘制一条路线，可以通过以下方式来实现：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------- ----- ---- - - ----- ---------- ---- ------------ ----- ---------- ---- ------------ ----- ---------- ---- ------------ ----- ---------- ---- ------------ ----- ---------- ---- ------------ -- ----- -------- - --- ------------- ----- ----- --------- ----- ------------ ---------- -------------- ---- ------------- - --- ---------------------
这里的 path 表示路线的经纬度坐标，geodesic 表示是否绘制成大圆弧线，strokeColor 表示路线的颜色，strokeOpacity 表示路线的透明度，strokeWeight 表示路线的粗细程度。你可以根据自己的需求来设置这些参数。
结束语
以上就是使用 movebe-agm 插件的基本教程。通过这篇文章的学习，相信大家已经能够轻松地在自己的项目中使用 movebe-agm 插件了。如果你需要更多的功能，可以查看官方文档或者参考插件源代码进行自定义实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e981e8991b448d7918