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

Question

我用谷歌地图的一些例子制作了一个简单的多标记地图。代码如下：

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

实现这一点的一个(好(方法是定义您的"默认"；标记并在其上触发单击事件(因为您已经在每个标记上注册了单击事件(。

下面的工作片段。代码是有注释的，所以它应该为自己说话。

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>