如何在地图上设置按钮答案

【问题标题】：how to set a button on the map如何在地图上设置按钮
【发布时间】：2021-09-09 09:06:56
【问题描述】：

是否可以像这张图片一样在地图上设置一个按钮，并用 Lat/Lng 坐标定义它的位置？

或者还有其他方法如何设置按钮的位置？

【问题讨论】：

你的问题太宽泛了。请只关注 1 个问题。见How to Ask。关于 1）有很多方法可以做到这一点（HTML 标记、标记 + 信息窗口、HTML 按钮）2）不是原生 3）有许多不同的来源，具有不同级别的详细信息，因此有不同的大小。
developers.google.com/maps/documentation/javascript/…
google example
既然您已将问题简化为一个问题，您是否尝试过我建议的任何方法？ HTML Marker (OverlayView) - 文档中有示例以及许多教程，您可以通过网络搜索轻松找到它们。 MapsCanvasProjection Interface 具有将坐标转换为 DOM 位置的方法，反之亦然。
第三次我提到你可以使用一个 HTML 标记，你可以使用OverlayView 构建它，正如我所说，周围有多个教程（this 是其中之一）可能也应该阐明如何使用 MapsCanvasProjection。 Stack Overflow 不是学习中心...如果您有技术/编码问题，您必须自己研究并来这里。

标签： google-maps google-maps-api-3

【解决方案1】：

感谢您的 cmets！

OverlayView 对于我的目的来说有点复杂，所以我找到了另一个解决方案。

let FormCH = {
    path: 'M -3,-0.5 3,-0.5 3,0.5 -3,0.5 z ',
    strokeColor: '#000',
    strokeWeight: 2,
    fillColor: '#99d126',
    fillOpacity: 1,
    scale: 30
};

let markerCH = new google.maps.Marker({
    position: {
        lat: 46.818188,
        lng: 8.227511999999999
    },
    map: map,
    draggable: false,
    icon: FormCH,
    label: {
        text: "Switzerland " + numCH,
        fontWeight: "bold",
        fontSize: "20px",
        color: "#fff"
    }
});

我用标签文本设置了一个标记，并用 svg 路径替换了标记图标。

结果如下： code result

但如您所见，绿色框周围有一些空间。您可以在“路径：”中调整它的大小，或者找到一种自动调整框大小的方法。

当我找到如何自动调整框大小的解决方案时，我将在此处发布。

【讨论】：