Google Maps v3 上的文本标签答案

【问题标题】：Text Labels on Google Maps v3Google Maps v3 上的文本标签
【发布时间】：2013-12-06 23:31:46
【问题描述】：

我最近在 Google 地图上从 v2 迁移到 v3，其中一个损坏的功能是使用文本标签，我是使用第三方库 (BpLabel) 实现的

问题：
如何在 Google Maps v3 中显示文本标签，其中包含触发的“鼠标悬停”等事件？注意：我不希望标记与文本标签一起可见。我只希望文本标签可见

我的尝试：

使用了 InfoWindow，但是太杂乱了，需要显式关闭覆盖，而我需要在鼠标悬停时关闭覆盖
使用了 InfoBox，它不像 InfoWindow 那样杂乱，但它也没有鼠标悬停之类的事件触发器

非常感谢遇到类似问题的任何人的帮助。

干杯，
罗希特斯

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

我认为唯一的方法是使用标记作为标签，即将标记的形状更改为您想要的标签。如何做到这一点的两个想法：

1) 将修改后的标记与自定义形状和文本一起使用 - 例如使用 Google Image Charts 和 Infographics 生成的图像图标（如 here 或 here）。但是the google API to create such icons is deprecated without remedy! Or isn't??有一个混淆，看我的评论在这里。

2) 使用 markerwithlabel library（通过谷歌搜索“google maps text in marker”很容易找到）。使用此库，您可以定义带有或不带有标记图标的标签的标记。如果你不想要标记图标，只需设置icon: {}：

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   icon: {}
 });

然后您可以像使用普通标记一样使用它，即为鼠标悬停事件添加 InfoWindow！

Here is the example how to use this library for what you need.

竞争代码：

                             <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Mouse Events</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

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

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       icon: {}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });

var ibOptions = {
    content: 'content'
    // other options
};

var ib = new google.maps.InfoWindow(ibOptions);

ib.open(map, this);
     google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
     google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });


   }

 </script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>

【讨论】：

@Tomas markerwithlabel 库将所有标记放在一个位置？如何在相应的点上显示每个标记。
@TMS：所有标记的内容框都在一个地方。这是一个错误还是我们遗漏了什么？
@JitendraPancholi 这只是一个展示可能性的例子，您可能需要根据您的目的对其进行微调。
@TMS：问题出在旧的谷歌地图库中，我用新的库更新了它，现在可以正常工作了。

【解决方案2】：

您可以使用 InfoBox，但不能通过向地图添加事件侦听器来使用悬停事件。您可以向信息框添加一个类（默认类是 infobox），因此您应该能够使用 jQuery 或 JavaScript 直接向其中添加悬停事件。这是我用来不显示带有标签的标记的代码：

var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ],
    regionsOptions = [],
    regionLabel = [];

for(var r=0; r<regionsMarkerInfo.length; r++){
          regionsOptions[r] = {
           content: "<a href='http://"+window.location.host+"/Destinations/Regions/" +  regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>"
          ,boxStyle: {
            textAlign: "left"
            ,fontSize: "18px"
            ,whiteSpace: "nowrap"
            ,lineHeight: "16px"
            ,fontWeight: "bold"
            ,fontFamily: "Tahoma"
           }
          ,disableAutoPan: true
          ,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1])
          ,closeBoxURL: ""
          ,isHidden: false
          ,pane: "floatPane"
          ,enableEventPropagation: true
          ,boxClass: "regionLabel"
          };

          regionLabel[r] = new InfoBox(regionsOptions[r]);
          regionLabel[r].open(map);
        }

那么你应该可以这样做来创建一个悬停事件：

$('.regionLabel').hover(function(){}, function(){});

或

document.getElementsByClassName('regionLabel).addEventListener('mouseover', ... )

如果您需要实际操作：

去这里：http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
打开控制台并输入（复制/粘贴）：$('.regionLabel').hover(function(){console.log('hovered');}, function(){console.log ('未悬停');});
将鼠标悬停在大标签上，您将在控制台中看到文本输出。

【讨论】：

【解决方案3】：

您可以告诉 Google 地图使用 URL 为 SVG 图像的图标。在大多数浏览器中，这也可以是数据 URI。如果您知道如何为您想要客户端的标记生成适当的 SVG，那么您可以执行此操作，然后使用 Base64 库将 SVG 字符串转换为 Base64 数据，并在其前面加上 'data:image/svg+xml; base64,' 然后它可用作数据 URI。

请注意，Internet Explorer 似乎有点繁琐，我发现我需要 scaledSize 属性以及通常的 size、origin、anchor 和 url 属性来渲染任何 SVG。

这种方法允许您使用完整的 SVG 图像，包括样式化的文本，这样您就可以创建一个带有任何您需要的样式的标签的标记。

【讨论】：