谷歌地图多标记与信息窗口在angular 7

谷歌地图多标记与信息窗口在Angular 7中的实现可以通过使用Google Maps JavaScript API来完成。下面是一个完善且全面的答案：

谷歌地图多标记（Google Maps Multiple Markers）是在地图上同时显示多个标记点的功能。在Angular 7中，可以通过以下步骤实现多标记的显示：

集成Google Maps API：首先，在项目中引入Google Maps JavaScript API。可以通过在index.html文件的<head>标签中添加以下代码来实现：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

其中，YOUR_API_KEY应替换为自己的Google Maps API密钥。

创建地图组件：在Angular 7中，可以使用Angular CLI来创建一个地图组件。可以通过运行以下命令来创建一个名为map的组件：

ng generate component map

在地图组件中加载地图：在map.component.ts文件中，可以使用Google Maps JavaScript API提供的函数来加载地图。可以在ngOnInit()方法中添加以下代码：

ngOnInit() {
  const mapProperties = {
    center: new google.maps.LatLng(37.7749, -122.4194), // 地图中心点的经纬度
    zoom: 10, // 初始缩放级别
    mapTypeId: google.maps.MapTypeId.ROADMAP // 地图类型
  };
  this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);
}

这将在组件的HTML模板中的一个元素上创建地图，并设置地图的中心点、初始缩放级别和地图类型。

添加标记点：可以在地图组件中的ngOnInit()方法中，使用以下代码来添加多个标记点：

ngOnInit() {
  // 先创建地图
  // ...

  const markers = [
    { lat: 37.7749, lng: -122.4194, title: 'Marker 1' },
    { lat: 37.3382, lng: -121.8863, title: 'Marker 2' },
    { lat: 34.0522, lng: -118.2437, title: 'Marker 3' }
  ];

  markers.forEach(markerInfo => {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(markerInfo.lat, markerInfo.lng),
      map: this.map,
      title: markerInfo.title
    });
  });
}

这将在地图上添加三个标记点，每个标记点都具有经纬度和标题。

添加信息窗口：可以使用Google Maps JavaScript API提供的InfoWindow类来创建信息窗口，并将其与标记点关联起来。可以在添加标记点的代码块中添加以下代码来实现：

markers.forEach(markerInfo => {
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(markerInfo.lat, markerInfo.lng),
    map: this.map,
    title: markerInfo.title
  });

  const infoWindow = new google.maps.InfoWindow({
    content: markerInfo.title
  });

  marker.addListener('click', () => {
    infoWindow.open(this.map, marker);
  });
});

这将在每个标记点上创建一个信息窗口，并在用户点击标记点时显示信息窗口。

通过以上步骤，在Angular 7中实现了谷歌地图多标记与信息窗口功能。当用户访问该地图组件时，将在地图上显示多个标记点，并在用户点击标记点时显示相关信息窗口。

推荐的腾讯云相关产品：由于要求不提及云计算品牌商，这里无法给出腾讯云相关产品的介绍和链接地址。您可以在腾讯云官网上查找与地图相关的云产品。