如何格式化谷歌地图标记的标签

How can I format the label of a google maps marker

本文关键字：标签 图标 地图 格式化 谷歌      更新时间：2023-09-26

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

这里的链接显示了可以设置的属性。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
 });

来自谷歌地图开发者文档标记

标记标签是单个文本字符，将出现在标记。如果您将其与自定义标记一起使用，则可以使用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}
   }
});

我正在使用label.js 标记

通过为标签DIV 定义一个具有所需属性的CSS类，可以最容易地为标签设置样式

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/docs/examples.html

相关文章：