npm 包 @h21-map/google-zoom-box 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Zoom Box 是一个能让你在 Google 地图上创建一个可缩放的方框，并将此方框中的所有标记聚合展示的 JavaScript 库。

安装

使用 npm 安装：

npm install @h21-map/google-zoom-box

使用

通过以下代码，你可以开始使用 Zoom Box：

import {ZoomBox} from '@h21-map/google-zoom-box';

const mapOptions = {
  center: new google.maps.LatLng(37.774546, -122.433523),
  zoom: 10,
};

const zoomBoxOptions = {
  gridStep: 100,
  maxZoom: 14,
  minZoom: 8,
};

const zoomBox = new ZoomBox(mapOptions, zoomBoxOptions);

参数

Zoom Box 接受两个参数：

mapOptions（可选的）- 创建地图的选项，与 Google 地图 API 中的 google.maps.Map 方法的参数相同。
zoomBoxOptions（可选的）- 控制 Zoom Box 行为的选项。常用选项如下：
- gridStep（必需的）- 方框的像素大小。
- maxZoom（必需的）- 方框可以放大到的最大级别。
- minZoom（必需的）- 方框可以缩小到的最小级别。

Zoom Box 还提供了其他的选项，请参考官方文档了解更多。

方法

Zoom Box 暴露了以下可用方法：

addMarker - 在方框中添加标记。
removeMarker - 从方框中移除标记。
removeAllMarkers - 移除所有标记。

示例代码：

const marker = new google.maps.Marker({
  position: new google.maps.LatLng(37.774546, -122.433523),
});

zoomBox.addMarker(marker);

总结

Zoom Box 提供了一个简洁易用的方法，能够将一个地区上的标记聚合起来，方便用户浏览。此外，Zoom Box 还具有许多可自定配置的选项，更好的适应各种不同的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e3fb81d47349e53e34