javascript - 带标签的 Google Maps API v3 标记

Question

我是 JS 和 Google API 的新手，我正在尝试制作多个标记，每个标记都有一个标签。

根据我一直在查看的小片段，在 Google Maps API v3 中没有简单的方法可以将标签附加到标记。在 Google 和 stackoverflow 搜索之间，每个人都使用了涉及创建或编辑标签类的迂回过程。

由于我刚刚开始学习 JS/Google API v3，所以我只想弄清楚如何以简单的方式将标签附加到每个标记。

谢谢

编辑#3:好吧，我终于弄清楚出了什么问题，并使用 Lilina 的代码正确地实现了带有标签的多个标记。显然，我们都以不同方式定义了 var 映射，这本身就使我们的代码无法很好地同步。

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

Google Maps API v3 - Different markers/labels on different zoom levels

Answer 1

我不能保证它是最简单的，但我喜欢MarkerWithLabel .如图the basic example ，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。默认情况下，标签的左上角将与标记图钉的端点对齐。将 labelAnchor 的 x 值设置为 CSS 宽度属性中定义的宽度的一半将使标签居中。您可以使用 new google.maps.Point(22, 50) 等 anchor 使标签 float 在标记图钉上方。

为了防止对上述链接的访问被阻止，我复制并粘贴了 packed source的 MarkerWithLabel 到这个 JSFiddle demo .我希望 JSFiddle 在中国被允许:|