如何摆脱自定义谷歌地图中出现在 HTML 编码文本中心的小圆圈图形？答案

【问题标题】：How to get rid of small circle graphic appearing at center of HTML-coded text in a customized Google Map?如何摆脱自定义谷歌地图中出现在 HTML 编码文本中心的小圆圈图形？
【发布时间】：2022-01-28 00:45:54
【问题描述】：

我是 HTML 新手，但这里是...

当放大时，这是我在各种文本行插入的中心看到的：

你可以在这里看到这个直播：https://becketbroadband.org/fsa-map%2Fstatus

明显负责的代码如下所示：

addOverlay(Map, FSA05_Border, '49d834', 0.3, 'FSA-05', { lat: 42.305200, lng: -73.058500}, 'Service Available Now');

想法？谢谢！

【问题讨论】：

您是指Available 中第二个a 中的小空心圆？
是的。也在它上面一行的大写字母A中。

标签： html graphics geometry maps center

【解决方案1】：

我在addOverlay 的代码中看到了这一点，位于您网站上的fsa-map/status：

new google.maps.Marker({
    position: labelPoint,
    map: BecketMap,
    icon: {
        path: google.maps.SymbolPath.CIRCLE, // anything, required
        fillOpacity: 0, // hide the symbol leaving just the label
    },
    label: {
        text: FSAlabel,
        color: &#x27;#000000&#x27;, // black
        fontSize: &#x27;20px&#x27;,
        fontWeight: &#x27;bold&#x27;,
    },
});

如果您根本不提供 icon 属性会怎样？

【讨论】：

好主意。我还在第一行下方找到了一个图标属性引用。取出任何一个都会颠倒每个区域中两行文本的顺序，并在文本中心添加一个红色位置气球。气球位于 FSA 行的顶部，并且位于每个区域的另一行文本的后面。从代码中取出两个图标属性引用会导致出现两个红色位置气球，一个位于每行文本的中心，并且都位于相关文本行的后面。图标属性似乎禁止显示气球图形。
不透明度设置必须为零。可悲的是，它把小圈子抛在了身后。奇怪，因为当气球出现时圆圈不显示。
哦，好吧。原来 fillOpacity 值没有任何效果。 :(
我的错。不透明度设置不是 1 到 10。它是 0 到 1。它的目的是隐藏圆圈，而不是气球（显然，默认情况下它被 icon 属性隐藏）。新手上车。 :P 更新：尝试了 0 和 1 之间的不同值。没有区别。 :(

【解决方案2】：

编写原始代码的人想出了答案。（直到我指出此线程中提到的图标属性详细信息之前，他没有任何想法。）

“fillOpacity”值针对圆的内部。这行新代码解决并隐藏了圆圈本身：

"strokeOpacity: 0,"

感谢 AakashM 让我找到了解决方案！ :) 你这个男人！

【讨论】：