谷歌地图V3标记与标签

Question

如果我的标记在ajax成功时每个结果都会被填充，我该如何为它们添加标签？

map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });

我试过这样做，但没有成功：

map.gmap('addMarker', { 
    'position': new google.maps.LatLng(result.latitude, result.longitude), 
    'bounds': true,
    'icon': markerIcon,
    'labelContent': 'A',
    'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
    'labelClass': 'labels', // the CSS class for the label
    'labelInBackground': false
});

- Adrian Florescu

Answer 1

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

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

这将有效。

- Ramyani

---

非常好。谢谢你，你太棒了！我希望你能得到更多的赞，因为你的回答比Tim的更加详尽，效果很好。 - joonas.fi

这绝对是这里最好的想法和答案。 请记住，它可能需要更好的标签定位。 这个类也可以作为一个独立的标签使用 - 没有标记。 谢谢！ :) - Boris Chervenkov

谢谢你的回答，帮了我很大的忙。但是我这里有一个问题，如何删除已经加载的多个标记的标签？提前感谢。 - Chirag Shah

一定应该被接受为答案。不需要插件，而且很容易根据您的特定需求进行调整。非常感谢您提供了如此好的解决方案！ - developering

还在吗，Ramyani？我有一个特殊的案例让我头疼。 - NoX

Answer 2

我怀疑标准库不支持此功能。

但是您可以使用Google Maps实用程序库：

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new MarkerWithLabel({
   position: myLatlng,
   map: map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: "A",
   labelAnchor: new google.maps.Point(3, 30),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

关于标记的基础知识可以在这里找到：https://developers.google.com/maps/documentation/javascript/overlays#Markers

- Markus Hi

---

我对这个东西真的很新，所以我卡住了。如果我添加var marker，那么地图属性是什么？地图画布吗？ - Adrian Florescu

谢谢，我猜问题也在于我使用了jquery-ui-map。无论如何还是感谢！ - Adrian Florescu

太棒了！我没想到还有一个“MarkerWithLabel”类。 - Mike Gledhill

@AdrianFlorescu，你是否找到了使用jquery-ui-map的解决方案？ - Shiv

Answer 3

从2015年8月开始，Google Maps 版本3.21开始支持单个字符标记标签。请参阅新的标记标签API。涂鸦标记的制作方法如下:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(result.latitude, result.longitude), 
  icon: markerIcon,
  label: {
    text: 'A'
  }
});

如果您想取消1个字符的限制，请为this issue投票。

更新于2016年10月：

这个问题已经得到解决，自版本3.26.10起，Google Maps原生支持多个字符标签与使用MarkerLabels的自定义图标组合。

- robd

---

仍然有极其有限的使用。目前实际解决方案仍然是MarkerWithLabel（或其自行实现的版本）。 - prusswan

Answer 4

不使用插件的方法是创建一个 Google 的 OverlayView() 方法的子类。

https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView

您可以创建一个自定义函数并将其应用于地图。

function Label() { 
    this.setMap(g.map);
};

现在您可以创建子类并添加 HTML 节点来进行原型设计：

Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
        this.MySpecialDiv               = document.createElement('div');
        this.MySpecialDiv.className     = 'MyLabel';
        this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers

}

你还需要按照API文档中的说明实现删除和绘制功能，否则这将无法正常工作。

Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
            $('.myLabel')
            .css({
                'top'   : position.y + 'px',
                'left'  : position.x + 'px'
            })
        ;
}

那就是要点，你需要在具体实现中做更多的工作。

- tim

---

抱歉，但是你的代码中有太多问号，使其没有用处：1）为什么在你的代码中有“var pos = this.get('position');”，它没有被使用？2）“function Label () { }”中的“g.map”指的是哪里？3）没有关于如何使用代码的示例？我们应该用“new Label()”替换“new google.maps.Marker()”吗？ - joonas.fi

Answer 5

现在，您可以通过google.maps.MarkerLabel接口向标记标签添加类名。 例如：

const marker = new google.maps.Marker({
      position: position_var,
      map,
      label: {
        text: 'label text',
        className: "my-label-class",
      },
      title: "Marker Title",
});

完整的选项列表请参见Google地图参考文档： https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel

- Jiminy Cricket