Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API v3标记与标签

Javascript 谷歌地图API v3标记与标签

javascript html google-maps google-maps-api-3

Javascript 谷歌地图API v3标记与标签,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我不熟悉JS和GoogleAPI，我正在尝试使用一个标签创建多个标记 从我所看到的一些小片段来看，在Google Maps API v3中，没有简单的方法将标签附加到标记上。在Google和stackoverflow搜索之间，每个人都使用了一个迂回的过程，包括创建或编辑label类 因为我刚刚开始学习JS/GoogleAPIv3，所以我只想弄清楚如何以一种简单的方式将标签附加到每个标记上 谢谢 编辑#3： 好的，我终于找出了问题所在，并使用Lilina的代码正确地实现了带有标签的多个标记。显然，

我不熟悉JS和GoogleAPI，我正在尝试使用一个标签创建多个标记

从我所看到的一些小片段来看，在Google Maps API v3中，没有简单的方法将标签附加到标记上。在Google和stackoverflow搜索之间，每个人都使用了一个迂回的过程，包括创建或编辑label类

因为我刚刚开始学习JS/GoogleAPIv3，所以我只想弄清楚如何以一种简单的方式将标签附加到每个标记上

谢谢

编辑#3： 好的，我终于找出了问题所在，并使用Lilina的代码正确地实现了带有标签的多个标记。显然，我们对var映射的定义不同，这本身就使得我们的代码无法很好地同步

我还有一个问题，现在我可以为每个标记使用标签了。 我希望能够根据用户所处的缩放级别隐藏标记及其标签

要向地图添加标签，需要创建自定义覆盖。位于的示例使用一个自定义类，
层
，该类继承自Google Maps API中的
OverlayView
（该类继承自
MVCObject
）。他有一个修订版（增加了对可见性、zIndex和点击事件的支持），可在以下位置找到：

以下代码直接取自Marc Ridey的博客（上面的修订链接）。

图层类别

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
  // Initialization
  this.setValues(opt_options);


  // Label specific
  var span = this.span_ = document.createElement('span');
  span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
  'white-space: nowrap; border: 1px solid blue; ' +
  'padding: 2px; background-color: white';


  var div = this.div_ = document.createElement('div');
  div.appendChild(span);
  div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;


// Implement onAdd
Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayImage;
  pane.appendChild(this.div_);


  // Ensures the label is redrawn if the text or position is changed.
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
    google.maps.event.addDomListener(this.div_, 'click', function() {
      if (me.get('clickable')) {
        google.maps.event.trigger(me, 'click');
      }
    })
  ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

//定义从google.maps.OverlayView派生的覆盖
功能标签（选项）{
//初始化
此.setValues（opt_选项）；
//标签特定
var span=this.span=document.createElement（'span'）；
span.style.cssText='位置：相对；左侧：-50%；顶部：-8px；'+
'空白：nowrap；边框：1px纯蓝色；'+
'填充：2px；背景色：白色'；
var div=this.div=document.createElement（'div'）；
子类（span）；
div.style.cssText='位置：绝对；显示：无'；
};
Label.prototype=new google.maps.OverlayView；
//实施onAdd
Label.prototype.onAdd=函数（）{
var pane=this.getPanes（）.overlayImage；
pane.appendChild（this.div)；
//确保在文本或位置更改时重新绘制标签。
var me=这个；
this.listeners=[
google.maps.event.addListener（这是'position_changed'，function（）{me.draw（）；}），
google.maps.event.addListener（这是'visible_changed'，function（）{me.draw（）；}），
google.maps.event.addListener（这是'clickable_changed'，function（）{me.draw（）；}），
google.maps.event.addListener（这个'text_changed'，function（）{me.draw（）；}），
google.maps.event.addListener（这是'zindex_changed'，function（）{me.draw（）；}），
google.maps.event.addDomListener（this.div_'click'，function（）{
如果（me.get（'clickable'））{
google.maps.event.trigger（me，'click'）；
}
})
];
};
//在移除时执行
Label.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
//标签从地图中删除，停止更新其位置/文本。
for（var i=0，i=this.listeners_uu.length；i
用法

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      Label Overlay Example
    </title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="label.js"></script>
    <script type="text/javascript">
      var marker;


      function initialize() {
        var latLng = new google.maps.LatLng(40, -100);


        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 5,
          center: latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        marker = new google.maps.Marker({
          position: latLng,
          draggable: true,
          zIndex: 1,
          map: map,
          optimized: false
        });


        var label = new Label({
          map: map
        });
        label.bindTo('position', marker);
        label.bindTo('text', marker, 'position');
        label.bindTo('visible', marker);
        label.bindTo('clickable', marker);
        label.bindTo('zIndex', marker);


        google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
        google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
      }


      function showHideMarker() {
        marker.setVisible(!marker.getVisible());
      }


      function pinUnpinMarker() {
        var draggable = marker.getDraggable();
        marker.setDraggable(!draggable);
        marker.setClickable(!draggable);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="height: 200px; width: 200px"></div>
    <button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
    <button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
  </body>
</html>


标签覆盖示例
var标记；
函数初始化（）{
var latLng=新的google.maps.latLng（40，-100）；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：5，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
marker=新的google.maps.marker({
位置：latLng，
真的，
zIndex:1，
地图：地图，
优化：错误
});
变量标签=新标签({
地图：地图
});
标签。绑定到（“位置”，标记）；
label.bindTo（'text'，marker'，position'）；
标签。绑定到（“可见”，标记）；
label.bindTo（'clickable'，marker）；
标签.bindTo（'zIndex'，标记）；
google.maps.event.addListener（标记'click'，函数（）{alert（'marker has clicked'）；}）
google.maps.event.addListener（标签'click'，函数（）{alert（'label has clicked'）；}）
}
函数showHideMarker（）{
marker.setVisible（！marker.getVisible（））；
}
函数pinUnpinMarker（）{
var draggable=marker.getDraggable（）；
marker.setDraggable（！draggable）；
marker.setClickable（！draggable）；
}
显示/隐藏标记
固定/解锁标记
我不能保证它是最简单的，但我喜欢。如中所示，CSS样式定义标签的外观，JavaScript中的选项定义内容和位置

 .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 60px;     
   border: 2px solid black;
   white-space: nowrap;
 }
JavaScript:

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });
唯一可能令人困惑的部分是拉贝朗乔。默认情况下，标签的左上角将与标记图钉的端点对齐。将labelAnchor的x值设置为CSS width属性中定义的宽度的一半将使标签居中。您可以使用锚定点使标签浮动在标记图钉上方，如
new google.maps.point（22,50）

如果对上面链接的访问被阻止，我复制并粘贴了MarkerWithLabel的内容。我希望在中国允许使用JSFIDLE:|

上述解决方案在ipad-2上不起作用

最近，我在绘制标记时遇到了safari浏览器崩溃问题，即使标记数量较少。最初我使用带有标签的marker（markerwithlabel.js）库 为了绘制标记，当我使用google native marker时，它正在工作