Google maps 如何在使用google map api时显示多边形标题

我在美国地图上画了每个州的多边形。 我希望在上面显示一个值（text/int）。我找不到任何能够在多边形顶部显示文本的多边形选项。有什么方法可以做到这一点

var poly = new google.maps.Polygon({
                            clickable: true,
                            paths: pts,
                            strokeColor: '#000000',
                            strokeOpacity: 0.3,
                            strokeWeight: 1,
                            fillColor: colour,
                            fillOpacity: 0.8,
                            title: name
                        });
                        polys.push(poly);
                        poly.setMap(map);

---

试试鼠标。不过不太确定

google.maps.event.addListener(polygon,"mouseover",function(){
this.setOptions({name: "title"});
});

你可以用这个。只需设置标签的位置并通过对象应用选项

label: new MapLabel({
    text: result[index].name,
    position: 
       new google.maps.LatLng(object.lat, object.lng), // the lat/lng of location of the label.
    fontSize: 10,
    fontColor: #000,
    labelInBackground: true,
    strokeColor: #000,
    map: map   // The map object to place the label on
})

---

多边形不支持开箱即用。您可以通过从google.maps.OverlayView派生来创建自定义标签类型

然后创建一个新标签，设置其属性，并将其位置设置为多边形的中心。一旦你这样做，谷歌地图api将更新标签的位置，如果你碰巧编辑多边形

//for var polygon
var _label = new Label({ map: _options.map, text: _options.name, position: polygon.GetCenter(), color: _options.colour });
_label.bindTo("zoom", _options.map, "zoom");

标签类

定义(
['gmap']，
功能（gmaps）{
//定义从gmaps.OverlayView派生的覆盖
变量标签=函数（选项）{
//初始化
此选项。设置值（选项）；
var div=this.div=document.createElement（'div'）；
div.style.cssText='位置：绝对；显示：无；-webkit转换：translateZ（0px）；z索引：1000；'；
//标签特定
var span=this.span=document.createElement（'span'）；
span.style.cssText='位置：相对；左侧：-50%；顶部：-8px；显示：块；过滤器：progid:DXImageTransform.Microsoft.Glow（颜色=#333333，强度=2）；'+
'空白：nowrap；边框：无；颜色：'+this.get（'color'）+'；'+
'填充：2px；z索引：1000；字体大小：12px；'；
if（this.get（'shadowstyle'）==未定义）
span.style.cssText+=“文本阴影：-1px-1px 0px#111，1px-1px 0px#111，-1px 1px 0px#111，1px 1px 0px#111；”；
其他的
span.style.cssText+=this.get（'shadowstyle'）；
子类（span）；
};
如果（gmaps.OverlayView）{
label.prototype=new gmaps.OverlayView（）；
}
//实施onAdd
label.prototype.onAdd=函数（）{
var pane=this.getPanes（）.overlylayer；
pane.appendChild（this.div)；
//确保在文本或位置更改时重新绘制标签。
var me=这个；
this.listeners=[
addListener（这是'position_changed'，function（）{me.draw（）；}），
gmaps.event.addListener（这是'text_changed'，function（）{me.draw（）；}）
];
};
//在移除时执行
label.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
//标签从地图中删除，停止更新其位置/文本。
for（var i=0，i=this.listeners_uu.length；i11）{
div.style.left=位置.x+‘px’；
div.style.top=位置.y+‘px’；
div.style.display='block'；
this.span_.innerHTML=this.get（'text'）.toString（）；
}否则{
div.style.display='none'；
}
};
退货标签；
}
);

我正在寻找一个简单的实现方法，我找到了这个解决方案。希望能帮助某人：

在你喜欢显示标签的位置创建标记（例如，在多边形的中间）

。

在此标记中，创建标签

在此标记中，将图标不透明度设置为0

标签将位于多边形上方

守则如下：

addMarkerAsLabel = async (position, map, title) => {
var marker = new this.props.google.Marker({
  position,
  map,
  draggable: false,
  label: {
    text: title,
    color: "#FFFFFF",
    textShadow: "2px 2px 2px #000000"
  },
  icon: {
    path: "your icon path here",
    fillOpacity: 0,
    strokeWeight: 0
  }
});

---

可能重复的可能重复与使用新库仅显示标签@geocodezipgoogle map.js:104未捕获引用错误：多边形未定义仅几何点相比，我一直在寻找更好的解决方案。这个链接不起作用了。是这个吗？尝试