我正在尝试将4个字符的标签(例如“A123”)添加到Google Map 标记中,该标记具有使用自定义路径定义的宽图标 .
var marker = new google.maps.Marker({
position: latLon,
label: { text: 'A123' },
map: map,
icon: {
path: 'custom icon path',
fillColor: '#000000',
labelOrigin: new google.maps.Point(26.5, 20),
anchor: new google.maps.Point(26.5, 43)
scale: 1,
}
});
marker label API仅限于一个字符,因此在上面的示例中只显示带有'A'的标记 . 我尝试使用chrome开发人员工具来破解由gmaps创建的html并恢复更长的标签 . 它完美显示,无需修改所需的CSS,所以我只需要找到一种方法来恢复谷歌 Map 剥离的其他标签字符 .
我提出了一个Google Maps Issue请求解除此限制 . 请考虑通过访问上面的链接投票支持Google问题并主演该问题以鼓励Google修复它 - 谢谢!
但与此同时,我是否可以使用一种解决方法来删除一个char限制?
有没有办法我可以创建google.maps.Marker的自定义扩展程序来显示我更长的标签?
5 回答
您可以将MarkerWithLabel与SVG图标一起使用 .
Update: Google Maps Javascript API v3现在原生支持MarkerLabel中的多个字符
proof of concept fiddle(你没有提供你的图标,所以我做了一个)
Note: there is an issue with labels on overlapping markers that is addressed by this fix, credit to robd who brought it up in the comments.
code snippet:
首先,感谢代码作者!
我在google搜索时找到了以下链接,它非常简单,效果最好 . 除非SVG被弃用,否则永远不会失败 .
https://codepen.io/moistpaint/pen/ywFDe/
这里的代码中有一些js加载错误,但它完全适用于提供的codepen.io链接 .
你只需要对你的SVG html进行uri编码,并在for循环中的“data:image / svg xml”之后替换image变量中的那个 .
对于uri编码,您可以使用uri-encoder-decoder
您可以先解码现有的svg代码,以便更好地理解所写的内容 .
好的,这是我提出的一个解决方案,它很混乱 .
我使用fontFamily标签属性将完整的标签文本放入div中 . 然后我使用querySelectorAll来匹配生成的样式属性以提取引用并在加载 Map 后重写标记:
这看起来很脆弱 . 有什么方法不那么可怕吗?
从API 3.26.10版开始,您可以使用多个字符设置标记标签 . 解除限制 .
试试吧,它有效!
此外,使用MarkerLabel对象而不仅仅是字符串,可以为外观设置许多属性,如果使用自定义图标,则可以设置labelOrigin属性以重新定位标签 .
资料来源:https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30(另外,您可以在上述链接的帖子中报告有关此问题的任何问题)
这个问题的一个更简单的解决方案,允许字母,数字和单词作为标签是以下代码 . 更具体地说,代码行以“icon:”开头 . 任何字符串或变量都可以替换为'k' .
--- locations数组保存lat和long,k是我映射的地址的行号 . 换句话说,如果我有100个地址来映射我的标记标签将是1到100 .