为什么我的 Google Maps API3 应用程序中不显示标记标题？答案

【问题标题】：Why don't the marker titles show in my Google Maps API3 application?为什么我的 Google Maps API3 应用程序中不显示标记标题？
【发布时间】：2012-03-23 03:00:23
【问题描述】：

我通过这个函数在我的地图上添加了标记。

markers：标记对象数组
location：LatLng 对象
myMarkerTitle：我的标记所需的标题

// adds new markers to the map.
function addAMarker(location, myMarkerTitle) {
    newMarker = new google.maps.Marker({
            position: location,
            map: map
    });
    newMarker.setTitle(myMarkerTitle);
    markers.push(newMarker);
}

它在地图上添加了标记，但我分配给标记的标题没有显示。为什么？

最后，我想要一张带有标记的地图，上面有标题。当客户将鼠标悬停在标记上并单击时，更多细节也会浮出水面。谢谢。

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

据我了解，您希望工具提示始终可见。有一个 InfoBox Utility 库可以创建类似的东西。它非常灵活，这也意味着有很多选项可以设置。例如，令人烦恼的是，如果文本太长，它会流到框外（因此需要动态设置宽度）。

文档：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html 下载：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/

看截图，如果你想要的话，下载 infobox_packed.js 并尝试下面的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="infobox_packed.js"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var count = 0;

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
          addMarker(event.latLng, "index #" + Math.pow(100, count));
          count += 1;
        });
      }

      function addMarker(pos, content) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        marker.setTitle(content);

        var labelText = content;

        var myOptions = {
          content: labelText
           ,boxStyle: {
              border: "1px solid black"
             ,background: "white"
             ,textAlign: "center"
             ,fontSize: "8pt"
             ,width: "86px"  // has to be set manually
             ,opacity: 1.0
            }
           ,disableAutoPan: true
           ,pixelOffset: new google.maps.Size(-43, -50) // set manually
           ,position: marker.getPosition()
           ,closeBoxURL: ""
           ,pane: "floatPane"
           ,enableEventPropagation: true
        };

        var ibLabel = new InfoBox(myOptions);
        ibLabel.open(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

【讨论】：

谢谢！这个工具很简单，可以满足我的需求。

【解决方案2】：

这不会解决您的问题，但是，为什么您在创建新标记后调用 setTitle？像这样的代码：

var newMarker = new google.maps.Marker{
    position: location,
    map: map,
    title: MyMarkerTitle
}

调用 setTitle 时，API 调用 MVCObject 方法集，所以上面的代码同：

var newMarker = new google.maps.Marker{
    position: location
};
newMarker.setMap(map);
newMarker.setTitle(myMarkerTitle);

这也有效：

var newMarker = new google.maps.Marker{ position: location };
newMarker.set("map", map);
newMarker.set("title", myMarkerTitle);

还有这个：

var newMarker = new google.maps.Marker{ position: location };
newMarker.setValues({ map: map, title: myMarkerTitle });

Here's the documention.

【讨论】：

【解决方案3】：

AFAICT 您的代码应该可以工作。这个对我有用。但仅当您将鼠标悬停在标记上时才会显示标题。在那之前它不会显示。您的 cmets 使您似乎误解了标题的工作原理。它们的显示是一个鼠标悬停事件。您的标题字符串也可能为 null 或 ''。

【讨论】：