响应 Local Context 事件

如果您的布局应在显示地点详情视图时更改，请使用事件监听器 placedetailsviewshowstart 和 placedetailsviewhidestart。在下面的示例中，有三个由自定义标记表示的地区。当用户点击其中一个地区标记时，系统会打开一个描述该地区的 InfoWindow。如果用户在 InfoWindow 处于打开状态时点击某个地图注点，InfoWindow 将在地图注点的地点详情视图显示时关闭，并在用户关闭地点详情视图时重新打开。

查看源代码

TypeScript

let map: google.maps.Map;

let infoWindow;
let infoStorage;

const districts = {
  a: {
    label: "1",
    location: {
      lat: -1.283975,
      lng: 36.818797,
    },
    name: "Central",
    description:
      "The Central Business District is a hub of economic activity during the day and a destination for great food at night.",
  },
  b: {
    label: "2",
    location: {
      lat: -1.270955,
      lng: 36.810857,
    },
    name: "Westlands",
    description:
      "With many high-end restaurants and a vibrant nightlife, Westlands attracts young professionals and their families. ",
  },
  c: {
    label: "3",
    location: {
      lat: -1.311868,
      lng: 36.838624,
    },
    name: "South",
    description:
      "Known for high-rise apartment buildings, South B and South C are in high demand.",
  },
};

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: districts["a"].location,
    zoom: 13,
  });

  // Add 3 custom markers that open InfoWindows on click
  for (const key in districts) {
    const district = districts[key];
    const marker = new google.maps.Marker({
      label: district.label,
      position: district.location,
      map: map,
      zIndex: 30,
    });

    marker.addListener("click", () => {
      // Close any open details or existing InfoWindows
      localContextMapView.hidePlaceDetailsView();

      if (infoWindow) {
        infoWindow.close();
      }

      // Create and open a new InfoWindow
      createInfoWindow(district, marker);

      // Define origin as the selected marker position
      localContextMapView.directionsOptions = {
        origin: district.location,
      };
    });
  }

  // Set the LocalContextMapView event handlers.
  localContextMapView.addListener("placedetailsviewshowstart", () => {
    if (infoWindow) {
      infoWindow.close();
    }
  });

  localContextMapView.addListener("placedetailsviewhidestart", () => {
    if (infoStorage) {
      createInfoWindow(infoStorage.district, infoStorage.marker);
    }
  });
}

// Creates an infoWindow and also stores information associated with the
// InfoWindow so the InfoWindow can be restored after it has been closed
// by non-user-initiated events.
function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  const contentDiv = document.createElement("div");
  const nameDiv = document.createElement("div");
  const descriptionDiv = document.createTextNode(district.description);

  contentDiv.classList.add("infowindow-content");
  nameDiv.classList.add("title");
  nameDiv.textContent = district.name;
  descriptionDiv.textContent = district.description;
  contentDiv.appendChild(nameDiv);
  contentDiv.appendChild(descriptionDiv);

  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);

  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    district: district,
    marker: marker,
  };

  // Clear content storage if infoWindow is closed by the user
  infoWindow.addListener("closeclick", () => {
    if (infoStorage) {
      infoStorage = null;
    }
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

注意：请参阅 TypeScript 和 Google 地图的使用方法指南。

JavaScript

let map;
let infoWindow;
let infoStorage;
const districts = {
  a: {
    label: "1",
    location: {
      lat: -1.283975,
      lng: 36.818797,
    },
    name: "Central",
    description:
      "The Central Business District is a hub of economic activity during the day and a destination for great food at night.",
  },
  b: {
    label: "2",
    location: {
      lat: -1.270955,
      lng: 36.810857,
    },
    name: "Westlands",
    description:
      "With many high-end restaurants and a vibrant nightlife, Westlands attracts young professionals and their families. ",
  },
  c: {
    label: "3",
    location: {
      lat: -1.311868,
      lng: 36.838624,
    },
    name: "South",
    description:
      "Known for high-rise apartment buildings, South B and South C are in high demand.",
  },
};

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: districts["a"].location,
    zoom: 13,
  });

  // Add 3 custom markers that open InfoWindows on click
  for (const key in districts) {
    const district = districts[key];
    const marker = new google.maps.Marker({
      label: district.label,
      position: district.location,
      map: map,
      zIndex: 30,
    });

    marker.addListener("click", () => {
      // Close any open details or existing InfoWindows
      localContextMapView.hidePlaceDetailsView();
      if (infoWindow) {
        infoWindow.close();
      }

      // Create and open a new InfoWindow
      createInfoWindow(district, marker);
      // Define origin as the selected marker position
      localContextMapView.directionsOptions = {
        origin: district.location,
      };
    });
  }

  // Set the LocalContextMapView event handlers.
  localContextMapView.addListener("placedetailsviewshowstart", () => {
    if (infoWindow) {
      infoWindow.close();
    }
  });
  localContextMapView.addListener("placedetailsviewhidestart", () => {
    if (infoStorage) {
      createInfoWindow(infoStorage.district, infoStorage.marker);
    }
  });
}

// Creates an infoWindow and also stores information associated with the
// InfoWindow so the InfoWindow can be restored after it has been closed
// by non-user-initiated events.
function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  const contentDiv = document.createElement("div");
  const nameDiv = document.createElement("div");
  const descriptionDiv = document.createTextNode(district.description);

  contentDiv.classList.add("infowindow-content");
  nameDiv.classList.add("title");
  nameDiv.textContent = district.name;
  descriptionDiv.textContent = district.description;
  contentDiv.appendChild(nameDiv);
  contentDiv.appendChild(descriptionDiv);
  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);
  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    district: district,
    marker: marker,
  };
  // Clear content storage if infoWindow is closed by the user
  infoWindow.addListener("closeclick", () => {
    if (infoStorage) {
      infoStorage = null;
    }
  });
}

window.initMap = initMap;
index.js

注意：所示 JavaScript 代码是从 TypeScript 代码段编译而来的。

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.infowindow-content {
  width: 300px;
}

.title {
  font-size: x-large;
  font-weight: bold;
}
style.css

HTML

<html>
  <head>
    <title>Local Context Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

试用示例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

了解代码

管理包含地点详情视图事件的 InfoWindow

如果您在地点详情视图处于打开状态时调用 InfoWindow.close()，打开的 InfoWindow 会从 DOM 中移除。为了创建“重新打开”InfoWindow 的效果，您必须将 InfoWindow 的属性存储在 DOM 之外的变量中，以便在希望 InfoWindow 再次显示时重新创建它。建议在创建 InfoWindow 时将信息保存到某个存储空间变量。

let infoStorage;

function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  let contentDiv = document.createElement('div');
  ...

  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);

  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    'district': district,
    'marker': marker,
  };
}

稍后，当地点详情视图关闭时，您可以调用同一 InfoWindow 创建函数来重新创建最后打开的 InfoWindow。

TypeScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});
index.ts

注意：请参阅 TypeScript 和 Google 地图的使用方法指南。

JavaScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});
index.js

更新路线出发地

由于此地图上有多个地区标记可供用户选择，因此我们会在标记的点击监听器中使用下面这几行代码将 directionsOptions 的出发地更新为最终点击的地区。这表明即使在初始化 localContextMapView 之后，也可以更新 directionsOptions。

试用示例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell