如何在Google地图上的标记旁显示一个标签？

Question

如何在Google地图上的标记旁显示一个标签？

23

我希望在谷歌地图上的标记旁边显示文本标签。之前我使用过Virtual Earth，现在开始使用Google Maps。我尝试设置Title属性，但这只会更改鼠标悬停时的文本。

有没有一种方法可以在标记下方显示一行小文本，并在用户缩放、平移和使用地图时保持不变？

- Great Turtle

我想我可能找到了一个答案...对于我来说，该网站似乎已经无法访问，但是谷歌有它的缓存。我会尝试一下并看看它的效果如何。 http://74.125.95.132/search?q=cache:http://googlemapsbook.com/2007/01/22/extending-gmarker/ - Great Turtle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ramyani · Accepted Answer

如果您只想在标记下方显示标签，则可以扩展Google地图标记以添加标签的setter方法，并且您可以通过扩展Google地图overlayView来定义标签对象，如下所示。

演示：jsFiddle

<script type="text/javascript">
    var point = { lat: 22.5667, lng: 88.3667 };
    var markerSize = { x: 22, y: 40 };


    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 - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
            this.span.style.top = (position.y - markerSize.y + 40) + 'px';
        }
    });
    function initialize(){
        var myLatLng = new google.maps.LatLng(point.lat, point.lng);
        var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var myMarker = new google.maps.Marker({
            map: gmap,
            position: myLatLng,
            label: 'Hello World!',
            draggable: true
        });
    }
</script>
<style>
    .map-marker-label{
        position: absolute;
    color: blue;
    font-size: 16px;
    font-weight: bold;
    }
</style>

这将起作用。