谷歌地图markerClusterer:当通过unpkg添加lib时，我如何在init传递选项

Question

我目前正试图在Magento 2网站上实现谷歌地图JavaScript MarkerClusterer。

正如Magento 2前端工作流程一样，我不能使用ES6+导入/导出功能(除非我处于开发模式(。在Magento 2中没有使用NPM。

MarkerClusterer文档指出，当通过unpkg进行添加时(我就是这么做的(，可以在markerClusterer.MarkerClusterer(此处"安装"部分的最后一行(访问MarkerCluster。

我可以用以下方式声明集群对象(集群使用默认算法和渲染器显示在地图上(：let cluster = new markerClusterer.MarkerClusterer({ markers, map });。

然而，我很难覆盖默认参数(我需要添加clusterClass和自定义图标(。

起初(在我意识到我将无法使用ES6+导入/导出功能之前(，当以以下方式声明我的集群对象时，它就像一个魅力：

let cluster = new MarkerClusterer(
map,
markers, {
clusterClass: "marker-cluster__icon",
imagePath: mapOperator.imageBasePath + "pin-cluster-",
});

我不知道如何使用以下语法传递新的选项/参数，我没有选择：let cluster = new markerClusterer.MarkerClusterer({ markers, map });。

我在互联网上找不到任何例子，因为现在每个人都在使用NPM或任何其他现代前端工作流。

以下示例不起作用：

let config = {
markers: {
clusterClass: "marker-cluster__icon",
imagePath: mapOperator.imageBasePath + "pin-cluster-",
},
map
}
let cluster = new markerClusterer.MarkerClusterer(config);

对我来说，这仍然是javascript如何工作的一个模糊部分。希望有人能照亮我的路。。。

Answer 1

所以多亏了@geocodezip，我终于实现了我的目标。以下线程的答案(不完全是重复的(有助于打破僵局：由于无法提供位置数据，无法在谷歌地图中应用自定义图标进行聚类。

剩下的一个警告是，我无法将自定义CSS类添加到标签(标记集群图标HTML元素(中，这将有助于获得更安全的关注(比.map [title][aria-label][role="button"](，以对集群中标记数量的信息进行样式设置。

我尝试了几种解决方案，包括google.maps.MarkerLabel接口className属性、这里提到的clusterClass选项和这里提到的cssClass选项，但似乎都不起作用。。。

let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster.png",
},
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
};
let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);

.map [title][aria-label][role="button"] {
margin-top: -5px;
margin-left: 5px;
&:before {
position: absolute;
right: 0;
top: 0;
display: block;
content: attr(aria-label);
width: 16px;
height: 16px;
text-align: center;
font-weight: 400;
font-size: 10px;
line-height: 16px;
letter-spacing: -1px;
background: #ffffff;
border: 2px solid;
border-radius: 50%;
color: @red;
border-color: @red;
}
}