为什么我的Google Maps API3应用程序中没有显示标记标题？

Question

为什么我的Google Maps API3应用程序中没有显示标记标题？

dan*_*007 2 javascript google-maps-api-3

我通过这个功能在地图上添加了标记.

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Hei*_*ang 5

根据我的理解,您希望始终可见工具提示.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 /中继/信息框/ SRC /

查看屏幕截图,如果它是您想要的,请下载infobox_packed.js并尝试以下代码.

InfoBox示例

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，8 月前
查看次数：	10021 次
最近记录：	13 年，8 月前