加载时显示特定的谷歌地图信息窗口

Question

我使用一些 Google 地图示例制作了一个简单的多标记地图。代码如下：

function initMap() {

  var center = {
    lat: 51.7504111,
    lng: -1.2826071
  };

  var locations = [
    ['Philz Coffee<br>\
    801 S Hope St A, Los Angeles, CA 90017<br>\
    <a href="https://goo.gl/maps/L8ETMBt7cRA2">Get Directions</a>', 34.046438, -118.259653],
    ['Philz Coffee<br>\
    525 Santa Monica Blvd, Santa Monica, CA 90401<br>\
    <a href="https://goo.gl/maps/PY1abQhuW9C2">Get Directions</a>', 34.017951, -118.493567],
    ['Philz Coffee<br>\
    146 South Lake Avenue #106, At Shoppers Lane, Pasadena, CA 91101<br>\
    <a href="https://goo.gl/maps/eUmyNuMyYNN2">Get Directions</a>', 34.143073, -118.132040],
    ['Philz Coffee<br>\
    21016 Pacific Coast Hwy, Huntington Beach, CA 92648<br>\
    <a href="https://goo.gl/maps/Cp2TZoeGCXw">Get Directions</a>', 33.655199, -117.998640],
    ['Philz Coffee<br>\
    252 S Brand Blvd, Glendale, CA 91204<br>\
    <a href="https://goo.gl/maps/WDr2ef3ccVz">Get Directions</a>', 34.142823, -118.254569]
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: center
  });

  var infowindow = new google.maps.InfoWindow({});
  var marker, count;

  for (count = 0; count < locations.length; count++) {

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, count) {
      return function() {
        infowindow.setContent(locations[count][0]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }
}

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});

infowindow.open(map, marker);

我添加了以下内容以尝试默认显示信息窗口（文档建议这应该可以工作），但这似乎不起作用：

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});

infowindow.open(map, marker);

但我真正想要实现的是如何在页面加载时显示特定标记，例如第二个“Philz Coffee”位置。非常感谢任何帮助。

Answer 1

实现此目的的一种（好的）方法是定义您的“默认”标记并在其上触发点击事件（因为您已经在每个标记上注册了点击事件）。

在下面工作 sn-p。代码已被注释，因此它应该说明一切。

function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1, 1)
    };

    var locations = [
        [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
        [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
        [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
        [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
        [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
        [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    // Create empty markers array
    var markers = [];

    // Create empty Info Window
    var infowindow = new google.maps.InfoWindow();

    // Create marker for each location
    for (var i = 0; i < locations.length; i++) {

        var marker = new google.maps.Marker({
            position: locations[i][0],
            map: map,
            title: locations[i][1]
        });

        // Register click event on each marker
        google.maps.event.addListener(marker, 'click', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][2]);
                infowindow.open(map, marker);
            }

        })(marker, i));
        
        // Push marker to markers array
        markers.push(marker);
    }
    
    // Define the default marker, here for example the marker labeled "Marker 4"
    var defaultMarker = markers[3];
    
    // Trigger click on default marker
    google.maps.event.trigger(defaultMarker, 'click');
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>