Question

我通过此功能在地图上添加了标记。

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

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

最后，我想要一张带有标记的地图，上面有标题。当客户端悬停并点击标记时，还会显示更多详细信息。谢谢。

Answer 1

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

Doc：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并尝试以下代码。

InfoBox example

<!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>

Answer 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.

Answer 3

AFAICT您的代码应该有效。这个对我有用。但只有当您将鼠标悬停在标记上时才会显示标题。直到那时它才会显示。您的评论似乎让您误解了标题的工作原理。他们的展示是一个onmouseover事件。您的标题字符串也可能为null或''。

为什么标记标题不会显示在我的Google Maps API 3应用程序中？

3 个答案: