Question

我有一张带有标记的地图，但我希望能够显示多个工具提示。

当我这样做时：

marker.openInfoWindowHtml(strToolTip);

...每次调用它时，它都会关闭之前的工具提示。

如何在同一张地图上显示多个标记工具提示？

由于

Answer 1

您是否尝试在标记点击事件上创建新的infowindow对象并打开它？

var infowindow = new google.maps.InfoWindow({ content: 'Hello world' });
infowindow.open(map, marker);

Answer 2

你可以试试这个：

    var markers = [
      { lat: 28.7051, lng: 77.1125 },
      { lat: 28.7081, lng: 77.1075 },
      { lat: 28.7021, lng: 77.1315 }
    ]
    var index=0;
    markers.forEach(function (marker) {

           var self=this;
           (function (marker) {
             let mark = new google.maps.Marker({ position: new google.maps.LatLng(marker.lat, marker.lng) });


             var infowindow = new google.maps.InfoWindow({ content: index });
             infowindow.open(self.map, marker);
             mark.setMap(self.map);
             index++;
        })(marker)
  })

注意： open()＆amp;的序列 setMap()必须与代码上方/下方类似。

前：

             infowindow.open(self.map, marker);
             mark.setMap(self.map);

快照如下：

如果您使用 angular2 / 4/5 ，请查看完整代码：

<强> map.component.ts：

import { Component, ViewChild } from '@angular/core';
import { } from '@types/googlemaps'; // You need to install @types/googlemaps, To know how hit this URL- https://medium.com/@svsh227/integrate-google-api-map-in-your-angular-2-4-5-app-472bf08fdac

@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  @ViewChild('map') gmapElement: any;
  map: google.maps.Map;
  ngOnInit() {
    var markers = [
      { lat: 28.4685, lng: 77.0056, toolTip: 'Here too' },
      { lat: 28.4795, lng: 77.0276, toolTip: 'Here too' },
      { lat: 28.4605, lng: 77.0546, toolTip: 'Here too' }
    ]

    // For center
    var mapProp = {
      center: new google.maps.LatLng(28.4595, 77.0266),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.HYBRID // also use ROADMAP,SATELLITE or TERRAIN
    };

    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    var marker = new google.maps.Marker({ position: mapProp.center });
    marker.setMap(this.map);
    var infowindow = new google.maps.InfoWindow({ content: "Hey !! Here we are" });
    infowindow.open(this.map, marker);
    this.setMultipleMarker(markers, this);
  }

  setMultipleMarker(markers, self) {
    markers.forEach(function (marker) {
      (function (marker) {
        let mark = new google.maps.Marker({ position: new google.maps.LatLng(marker.lat, marker.lng) });
        let infowindow = new google.maps.InfoWindow({ content: marker.toolTip });
        infowindow.open(self.map, mark);
        mark.setMap(self.map);
      })(marker)
    })
  }
}

<强> map.component.html：

<div>
  <br />
  <h1>
    <span class="heading-text">Here We Are</span>
  </h1>
  <div class="row" class="card-details rcorners3 card-height">
    <div class="card" class="subAbout tech-stack">
      <div class="card-header card-header-us">
        <div id="map" #map></div>
      </div>
    </div>
  </div>
</div>

这是输出/快照：

Google Maps API - 显示多个标记工具提示

2 个答案: