Question

我想在谷歌地图上的标记旁边显示一个文字标签。我之前使用过虚拟地球，而我刚开始使用谷歌地图。我尝试设置Title属性，但只更改了roll over text。

有没有办法在标记下方显示一小段文字，当用户放大，平移并使用地图时，该标记会留在那里？

提前致谢！

Answer 1

对于Google Maps JavaScript API v3，请查看the examples here。

Source code available in normal and minimised forms

Answer 2

有一个很好的标签类here，但你必须将它与标记一起添加。

Answer 3

如果您只想在标记下方显示标签，那么您可以扩展谷歌地图标记以添加标签的setter方法，您可以通过扩展谷歌地图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>

这样可行。

Answer 4

以下是一些可以解决问题的示例代码： https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

这是一个名为InfoBox的自定义类。您可以在上面的链接上看到API参考

可以从这里包含js文件： https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

干杯！

Answer 5

即使这个问题已经回答我已找到this resource，我认为这是一个很好的解决方案，可能会有所帮助。此外，可以找到类似的解决方案here。

Answer 6

使用js库的另一种方法是简单地创建一个包含文本的.png图标。这听起来很愚蠢，但你可以使用一些外部服务（如this one）。

您上传图标，并获得回复链接。如果您向链接网址添加一些文字 - 它会返回您的图标，并将该文字呈现在其中。

如何在Google地图标记旁边显示标签？

6 个答案: