带标签的 Primefaces GMap 标记

Question

我在我的 .xhtml 中设置了一个 gmap，并在我的操作中添加了标记：

<p:gmap id="topologyMap" fitBounds="true" type="MAP"
                            mapTypeControl="false" draggable="true" disableDoubleClickZoom="true"
                            navigationControl="false" streetView="false"
                            style="width:100%;height:500px"
                            model="#{Action.simpleModel}" disableDefaultUI="true">

在我的行动中，我有

MapModel simpleModel = new DefaultMapModel();;
Marker newMarker = new Marker(new LatLng(latitude, longitude));
newMarker.setIcon("resources/media/marker-blue-dot.png");
simpleModel.addOverlay(newMarker);

我不知道如何为我的标记添加标签。通过标签，我的意思是我想在我的标记下方显示一些文本，例如：标记下方的城市名称。我正在使用 primefaces 6.0。

谢谢。

Answer 1

你必须为此使用一些 Javascript

  <script>

        google.maps.Marker.prototype.setLabel = function (label) {
            this.label = new MarkerLabel({
                map: this.map,
                marker: this,
                text: label
            });
            this.label.bindTo('position', this, 'position');
        };

        var MarkerLabel = function (options) {
            this.setValues(options);
            this.span = document.createElement('span');
            this.span.className = 'map-marker-label';
        };

        MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
            onAdd: function () {
                this.getPanes().overlayImage.appendChild(this.span);
                var self = this;
                this.listeners = [
                    google.maps.event.addListener(this, 'position_changed', function () {
                        self.draw();
                    })
                ];
            },
            draw: function () {
                var text = String(this.get('text'));
                var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
                this.span.innerHTML = text;
                this.span.style.left = position.x + 'px';
                this.span.style.top = position.y + 'px';
            }
        });

        //This is the base function
        function initialize() {

            //Take the map from Primefaces Gmap
            var gmap = PF('geoMapV').getMap();

            //Take All Markers in from the map
            var myMarkers = gmap.markers;

            //Add Label to the marker
            var i = 0;
            for (i = 0; myMarkers.length > i; i++) {
                myMarkers[i].setLabel("Marker Label!!");
            }

        }

    </script>

然后添加一些样式以在地图中显示标记

<style>
        .map-marker-label {
            position: absolute;
            color: red;
            font-size: 16px;
            font-weight: bold;
            /* Use margin to position the text */
            /* top, left position is the place of marker position */
            margin-top: -30px;
            margin-left: 15px;
        }
    </style>

我从 ManageBean 调用 initialize()

     //Call Javascript from the labels  markers
     RequestContext.getCurrentInstance().execute("initialize()");

结果

Answer 2

有一个带有标题字符串的 Marker 构造函数：

public Marker(LatLng latlng, String title)