目录

谷歌地图 - 信息窗口( Info Window)

除了标记,多边形,折线和其他几何形状,我们还可以在地图上绘制信息窗口。 本章介绍如何使用信息窗口。

添加一个窗口

信息窗口用于向地图添加任何类型的信息。 例如,如果要提供有关地图上某个位置的信息,可以使用信息窗口。 通常,信息窗口附加到标记。 您可以通过实例化google.maps.InfoWindow类来附加信息窗口。 它具有以下属性 -

  • Content - 您可以使用此选项以String格式传递内容。

  • position - 您可以使用此选项选择信息窗口的位置。

  • maxWidth - 默认情况下,信息窗口的宽度将被拉伸,直到文本被包装。 通过指定maxWidth,我们可以水平限制信息窗口的大小。

例子 (Example)

以下示例显示如何设置标记并在其上方指定信息窗口 -

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      <script>
         function loadMap() {
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            marker.setMap(map);
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
            infowindow.open(map,marker);
         }
      </script>
   </head>
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
</html>

它将产生以下输出 -

新页面打开
↑回到顶部↑
WIKI教程 @2018