javascript - 为什么标记标题不显示在我的 Google Maps API3 应用程序中?

标签 javascript google-maps-api-3

我通过此功能在我的 map 上添加了标记。

markers:一个 Marker 对象数组
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);
}

它在 map 上添加了标记,但我分配给标记的标题没有显示。为什么?

最后,我想要一张 map ,上面有分散的标记和标题。当客户将鼠标悬停在标记上并单击时,还会出现更多详细信息。谢谢。

最佳答案

据我了解,您希望工具提示始终可见。 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 并尝试下面的代码。

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>

关于javascript - 为什么标记标题不显示在我的 Google Maps API3 应用程序中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9762694/

相关文章:

javascript - Chrome 的 window.onload

javascript - 我怎样才能使这个点击计数器正常工作?

javascript - ruby 代码片段中的 Coffesscript 变量

javascript - 按钮宽度调整为窗口宽度(或包含 div)

google-maps - 谷歌地图默认 tiptool 倾斜箭头样式

php - 使用php mysql计算从数据库中选择的2个位置之间的距离

javascript - Google Maps API v3,地理位置未正确返回

javascript - 不能同时通过类和数字 ID 选择 jquery 元素

javascript - 在谷歌地图 Angular 查找距离

html - 如何删除 map 中的信息窗口箭头?