如何在使用Google Map API时显示多边形标题

Question

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

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);

Answer 1

您可以使用MapLabel Utility执行此操作。只需设置标签的位置，然后通过该对象应用选项即可。

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
})

Answer 2

Polygon不支持此功能。您可以通过从google.maps.OverlayView派生来创建自定义标签类型。

然后创建一个新的Label，设置其属性，并将其位置设置为多边形的中心。完成此操作后，如果您碰巧要编辑多边形，Google Maps 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");

Label类。 From a library I created a while back to manage spatial objects in google maps

define(
    ['gmaps'],
    function(gmaps) {

        // Define the overlay, derived from gmaps.OverlayView
        var label = function(options) {
            // Initialization
            this.setValues(options);

            var div = this.div_ = document.createElement('div');
            div.style.cssText = 'position: absolute; display: none; -webkit-transform: translateZ(0px); z-index:1000;';

            // Label specific
            var span = this.span_ = document.createElement('span');

            span.style.cssText = 'position: relative; left: -50%; top: -8px; display:block; filter:progid:DXImageTransform.Microsoft.Glow(Color=#333333, Strength=2); ' +
                'white-space: nowrap; border: none; color:' + this.get('color') + '; ' +
                'padding: 2px; z-index:1000; font-size:12px; ';

            if (this.get('shadowstyle') == undefined)
                span.style.cssText += 'text-shadow: -1px -1px 0px #111, 1px -1px 0px #111, -1px 1px 0px #111, 1px 1px 0px #111;';
            else
                span.style.cssText += this.get('shadowstyle');

            div.appendChild(span);
        };

        if (gmaps.OverlayView) {
            label.prototype = new gmaps.OverlayView();
        }

        // Implement onAdd
        label.prototype.onAdd = function() {
            var pane = this.getPanes().overlayLayer;
            pane.appendChild(this.div_);

            // Ensures the label is redrawn if the text or position is changed.
            var me = this;
            this.listeners_ = [
                gmaps.event.addListener(this, 'position_changed', function() { me.draw(); }),
                gmaps.event.addListener(this, 'text_changed', function() { me.draw(); })
            ];
        };

        // Implement onRemove
        label.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);

            // Label is removed from the map, stop updating its position/text.
            for (var i = 0, I = this.listeners_.length; i < I; ++i) {
                gmaps.event.removeListener(this.listeners_[i]);
            }
        };

        // Implement draw
        label.prototype.draw = function() {
            var projection = this.getProjection();
            var position = projection.fromLatLngToDivPixel(this.get('position'));
            var mapzoom = this.get('zoom');
            if (mapzoom == null) mapzoom = 16;

            var div = this.div_;

            if (mapzoom > 11) {
                div.style.left = position.x + 'px';
                div.style.top = position.y + 'px';
                div.style.display = 'block';
                this.span_.innerHTML = this.get('text').toString();
            } else {
                div.style.display = 'none';
            }
        };

        return label;
    }
);

Answer 3

我一直在寻找一种简单的实现方法，因此找到了解决方案。希望可以帮助某人：

1. 在您想要显示标签的位置（例如，在多边形的中间）创建一个标记
2. 在此标记中，创建标签
3. 在此标记中，将图标的不透明度设置为0
4. 您将在多边形上方放置标签。

代码如下：

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
  }
});

Answer 4

尝试使用mouseOver。不过不太确定。

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