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

spe*_*003 1 javascript css google-maps

我一直在四处寻找以了解如何在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
 });
Run Code Online (Sandbox Code Playgroud)

sca*_*dge 5

从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.
Run Code Online (Sandbox Code Playgroud)

那么您可以采用这种方式格式化,例如:

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}
   }
});
Run Code Online (Sandbox Code Playgroud)