如何在使用 google 地图 api 时显示多边形标题

Question

我在美国地图上为每个州绘制了多边形。我希望在其上显示一个值 (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);

Answer 1

试试鼠标悬停。不过不太确定。

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

Answer 2

您可以使用 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 3

Polygon 不支持开箱即用。您可以做的是通过从 google.maps.OverlayView.

派生来创建自定义标签类型

然后创建一个新标签，设置其属性，并将其位置设置为多边形的中心。执行此操作后，如果您碰巧编辑了多边形，google 地图 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");

标签class。 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 4

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

在您想要显示标签的位置创建一个标记（例如，在多边形的中间）
在此标记中，创建标签。
在此标记中，使用 1px x 1px 透明图像，这样图标就不会显示了。
标签将位于多边形上方。

代码如下：

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: {
    url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjyHQt+g8ABFsCIF75EPIAAAAASUVORK5CYII="
  }
});

如何在使用 google 地图 api 时显示多边形标题

How to display polygon title while using google map api

google-maps

polygon

google-maps-api-3

google-maps-markers