简介
google-maps-direction 是一款基于 Google Maps API 的 npm 包，可用于快速在网页中显示两点之间的驾驶或步行路线。该包提供了简单易用的接口，可定制化地设置路线的起点、终点、交通方式、路线颜色等。
安装
在使用 google-maps-direction 之前，需要先在本地安装该 npm 包。可以通过以下命令进行安装：
npm install google-maps-direction --save
接下来在项目中引入该包：
import { googleMaps } from 'google-maps-direction';使用
在使用该 npm 包之前，需要先在 Google Cloud Platform 中创建一个项目，并开启 Google Maps API 权限。详情可以参考官方文档。
在需要显示路线的网页中创建一个空的
div元素，用于容纳地图。该元素需要设置宽度和高度。<div id="map" style="width: 500px; height: 500px;"></div>
使用
googleMaps.createMap()方法创建 Google Maps 实例，并传入地图容器的 ID、地图的中心坐标和缩放级别。const map = googleMaps.createMap({ containerId: 'map', center: { lat: 40.7128, lng: -74.006 }, zoom: 12, });使用
googleMaps.createDirection()方法创建路线实例，并传入起点和终点的经纬度坐标。const direction = googleMaps.createDirection({ origin: { lat: 40.7505, lng: -73.9934 }, destination: { lat: 40.7589, lng: -73.9851 }, });调用
direction.getRoute()方法获取路线数据，并在回调函数中显示路线。-- -------------------- ---- ------- ------------------------- -- - ----- ----- - --------------- ----- -------- - --- ---------------------- ----- --- ------------ ---------- ------------- -- --- ----- ------ - --- --------------------------- ------------------------ -- - ------------------------ -- - ----- ---- - ----------------- -- -- ---- -------- ---- ------- ---- --------------------------------- ---------------------------- ---------------------------------------- - ---- --- --- --------------------- ---------------------- ---以上代码将在地图上绘制红色的路线，并自动调整地图的视野，以适应路线的范围。
定制化
除了上述基础用法外，google-maps-direction 还提供了许多其他接口，可用于对路线进行更加定制化的设置，例如设置路线的交通方式、避开某些道路、自定义路线颜色等。具体可以参考官方文档。
总结
google-maps-direction 可以帮助开发者快速在网页中显示两点之间的路线，并提供了丰富的定制化接口，非常适合用于开发地图应用。在使用该 npm 包时需要先申请 Google Maps API 权限，并设置好地图容器、路线起点和终点等参数，然后通过调用路线实例的方法获取路线数据，最后在回调函数中进行显示。总体来说，该 npm 包使用简单，功能强大，非常值得开发者学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee74f1