如何格式化Google Maps标记的标签

speedracer2003 发表于 Dev

speedracer2003

我一直在四处寻找以了解如何在Google地图中的自定义标记上设置文本格式。我发现了一些东西，但是它们都至少使用了一个我想避免的外部js文件。我阅读了Google网站上的API文档（请参阅链接并在“标记标签”下查看），它说可以格式化标签，但是没有示例。我希望能够增加文本大小并更改颜色有人可以帮我吗？

这是显示可以设置的属性的链接。https://developers.google.com/maps/documentation/javascript/reference#MarkerLabel

 var icon_img = {
                url: "../img/custom_marker.png",
                scaledSize: new google.maps.Size(40, 50),
                origin: new google.maps.Point(0, 0), 
                anchor: new google.maps.Point(20, 50),
            };

 var sample_marker = new google.maps.Marker({
    position: {lat: my_lat, lng: my_lng},
    map: my_map,
    label: "1",
    icon: icon_img
 });

scaisEdge

从Google Maps Developer Doc MarkerLabel

标记标签是单个字符，将显示在标记内。如果将其与自定义标记一起使用，则可以通过Icon类中的labelOrigin属性将其重新放置。

对于此单个字符，您可以配置的唯一属性是

color        string The color of the label text. 
                    Default color is black.
fontFamily  string The font family of the label text 
                    (equivalent to the CSS font-family property).
fontSize    string The font size of the label text 
                    (equivalent to the CSS font-size property). 
                    Default size is 14px.
fontWeight  string The font weight of the label text 
                   (equivalent to the CSS font-weight property).
text        string The text to be displayed in the label. 
                   Only the first character of this string will be shown.

那么您可以采用这种方式格式化，例如：

var sample_marker = new google.maps.Marker({
   position: {lat: my_lat, lng: my_lng},
   map: my_map,
   label: {
         text: "1",
         color: "#F00"
   },
   icon: {
         url: "image_url.png",
         origin: {x: 0, y: 0}
   }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。