Question

我一直在寻找如何在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
 });

Answer 1

来自谷歌地图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}
   }
});

Answer 2

我正在使用markerwithlabel.js

通过定义具有标签DIV

所需属性的CSS类，可以最方便地设置标签样式

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

如何格式化Google地图标记的标签

2 个答案: