zoukankan      html  css  js  c++  java
  • 谷歌地图 API 开发之信息窗口

    信息窗口

    简介

    InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像)。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。

    通常,您会将信息窗口附加到标记,但您也可以将信息窗口附加到特定纬度/经度,如下面的“添加信息窗口”部分所述。

    添加信息窗口

    InfoWindow 构造函数采用了 InfoWindowOptions 对象字面量,后者为显示信息窗口指定了一组初始参数。

    InfoWindowOptions 对象字面量包含以下字段:

    • content:其中包含要在信息窗口中显示的本文字符串或 DOM 节点。

    • pixelOffset:其中包含从信息窗口的顶部到信息窗口锚定位置的偏移量。实际上,您不应也无需修改此字段。您可以将其保留为默认值。

    • position:其中包含此信息窗口锚定位置的 LatLng。注:InfoWindow 可附加到 Marker对象(此情况下,其位置取决于标记的位置),或附加到地图本身指定的 LatLng 位置。在标记上打开信息窗口将自动更新 position

    • maxWidth:用于指定信息窗口的最大宽度(以像素为单位)。默认情况下,信息窗口会根据其中包含的内容进行扩展,如果信息窗口填满地图,那么文本将会自动换行。如果您添加maxWidth,则信息窗口将自动换行以强制适应指定的宽度。如果信息窗口达到最大宽度,但屏幕上仍有垂直空间,则信息窗口可能会垂直扩展。

    InfoWindow 的内容可包含文本字符串、HTML 代码段或 DOM 元素。要设置此内容,请在 InfoWindowOptions 中指定该内容,或者对 InfoWindow 显式调用 setContent()

    如果您想要显式调整内容的大小,则可将其纳入 <div> 元素中,并使用 CSS 设置 <div> 的样式。您还可以使用 CSS 启用滚动功能。请注意,如果您不启用滚动功能,且内容超出信息窗口中可用的空间,则内容可能会溢出信息窗口。

    打开信息窗口

    创建信息窗口时,它不会自动显示在地图上。要使信息窗口可见,则需对 InfoWindow 调用 open() 方法,并向其传递其要在上面打开的 Map,也可以选择向其传递其要锚定到的 Marker。如果没有提供任何标记,则信息窗口将在其 position 属性指定的位置处打开。

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info window with <code>maxWidth</code></title>
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
    
    // This example displays a marker at the center of Australia.
    // When the user clicks the marker, an info window opens.
    // The maximum width of the info window is set to 200 pixels.
    
    function initMap() {
      var uluru = {lat: -25.363, lng: 131.044};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    
      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';
    
          var infowindow = new google.maps.InfoWindow({
            content: contentString,
            //maxWidth: 200
          });
        
          var marker = new google.maps.Marker({
            position: uluru,
            map: map,
            title: 'Uluru (Ayers Rock)'
          });
          marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
        }
        
        </script>
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&callback=initMap"></script>
      </body>
    </html>
    
    

    关闭信息窗口

    默认情况下,InfoWindow 保持打开状态,直至用户点击关闭控件(信息窗口右上角的叉号)。如果您需要,可以通过调用其 close() 方法来显式关闭信息窗口。

    移动信息窗口

    • 对信息窗口调用 setPosition()

    • 使用 InfoWindow.open() 方法将信息窗口附加到新标记上。注:如果您调用 open() 而不传递标记,InfoWindow 将使用构造时通过 InfoWindowOptions 对象字面量指定的位置。

    自己的例子

    可以参考下https://segmentfault.com/a/11...,也有信息窗口的实现。

  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址:https://www.cnblogs.com/10manongit/p/12934430.html
Copyright © 2011-2022 走看看