Google maps api 3 谷歌地图V3标记与标签

如果我的标记是在每个结果上填充的，我如何向标记添加标签

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
});

---

我怀疑标准库是否支持这一点

但您可以使用谷歌地图实用程序库：

---

关于marker的基本知识可以在这里找到：

不使用插件的方法是创建google 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'
            })
        ;
}

---

这就是它的要点，您必须在具体的实现中做更多的工作。

如果您只想在标记下显示标签，那么您可以扩展google maps marker以添加标签的setter方法，并且您可以通过如下扩展google maps OverlyView来定义标签对象

var点={lat:22.5667，lng:88.3667}；
var-markerSize={x:22，y:40}；
google.maps.Marker.prototype.setLabel=函数（标签）{
this.label=新标记标签({
map:this.map，
马克：这个，
文本：标签
});
this.label.bindTo（'position'，this，'position'）；
};
var MarkerLabel=函数（选项）{
此选项。设置值（选项）；
this.span=document.createElement（'span'）；
this.span.className='map marker label'；
};
MarkerLabel.prototype=$.extend（新的google.maps.OverlayView（）{
onAdd:function（）{
this.getPanes（）.overlayImage.appendChild（this.span）；
var self=这个；
此参数为0.listeners=[
google.maps.event.addListener（这是'position_changed'，function（）{self.draw（）；}）；
},
绘图：函数（）{
var text=String（this.get（'text'）；
var position=this.getProjection（）.fromLatLngToDivPixel（this.get（'position'）；
this.span.innerHTML=文本；
this.span.style.left=（position.x-（markerSize.x/2））-（text.length*3）+10+'px'；
this.span.style.top=（position.y-markerSize.y+40）+'px'；
}
});
函数初始化（）{
var mylatng=new google.maps.LatLng（point.lat，point.lng）；
var gmap=new google.maps.Map（document.getElementById（'Map_canvas'）{
缩放：5，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var myMarker=new google.maps.Marker({
地图：gmap，
职位：myLatLng，
标签：“你好，世界！”，
德拉格布尔：是的
});
}
.地图标记标签{
位置：绝对位置；
颜色：蓝色；
字体大小：16px；
字体大小：粗体；
}

---

这将起作用。

版本3.21（2015年8月）支持单字符标记标签。看

现在，您可以按如下方式创建标签标记：

var marker=new google.maps.marker({
位置：新的google.maps.LatLng（结果.纬度，结果.经度），
图标：markerIcon，
标签：{
文字：“A”
}
});

如果您希望看到删除1个字符的限制，请投票支持

2016年10月更新：

---

本期以及自3.26.10版起，Google Maps本机支持多个字符标签，并使用自定义图标。

您现在可以通过Google.Maps.MarkerLabel界面向标记标签添加类名。 例如：

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

有关选项的完整列表，请参阅谷歌地图参考文档：

---

我对这种东西真的很陌生，所以我被卡住了。如果我添加var标记，map属性是什么？地图画布？谢谢，我想问题还在于我使用了jquery ui地图。谢谢你！好东西！我不知道有一个“MarkerWithLabel”类。@AdrianFlorescu您找到使用jquery ui映射的解决方案了吗？对不起，但是您的代码中有太多问号，使它变得有用：1）为什么代码中的“var pos=this.get（'position'）；”没有使用？2） “函数标签（）{”中的“g.map”指的是哪里？3）没有关于如何使用代码的示例？我们应该用“新标签（）”替换“新的google.maps.Marker（）”吗？很有魅力。谢谢你，你太棒了！我希望你能获得更多的支持，你的答案比tim的100%更全面。绝对是最好的主意和答案。记住，它可以使用更好的标签定位。这个类也可以用作独立的标签-没有标记。谢谢！：）谢谢你的回答帮助我。但我有一个问题如何删除以前加载的多个标记的标签？感谢您的帮助。“未捕获类型错误：无法读取行“google.maps.marker.prototype.setLabel=function（label）…”的未定义属性“prototype”Google Maps API已加载并正常工作。添加标记工作正常，但访问标记原型失败。这肯定是公认的答案。无需插件，并且可以根据您的特定需求轻松调整。非常感谢伟大的解决方案！使用仍然非常有限。当前的实用解决方案仍然非常有用kerWithLabel（或它的一些自卷实现）

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