javascript - 在谷歌地图中使用数组居中并打开 InfoWindow

Question

我运行以下代码，以在与我的地理位置标记分开的数组中的 map 上显示标记。制作一个简单的外部链接很容易，但如何在数组标记中创建相同的链接，以及这在 IE 中不起作用的任何原因？

JS:

//Retina Images
var RetinaHotelMarker = new google.maps.MarkerImage("./assets/images/global/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385f54575a59546755594a535d4a6750574c5d54780a401648565f" rel="noreferrer noopener nofollow">[email protected]</a>", null, null, null, new google.maps.Size(30,30));
var RetinaChurchMarker = new google.maps.MarkerImage("./assets/images/global/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea9a2a1acafa291a3afbca5abbc91ada6bbbcada68efcb6e0bea0a9" rel="noreferrer noopener nofollow">[email protected]</a>", null, null, null, new google.maps.Size(30,30));
var RetinaCrosshair = new google.maps.MarkerImage("./assets/images/global/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1d1615181b1625171b08111f08251908150909121b13083a4802540a141d" rel="noreferrer noopener nofollow">[email protected]</a>", null, null, null, new google.maps.Size(30,30));
var RetinaMarker = new google.maps.MarkerImage("./assets/images/global/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7b70737e7d7043717d6e77796e5c2e64326c727b" rel="noreferrer noopener nofollow">[email protected]</a>", null, null, null, new google.maps.Size(30,30));

//Markers
var markers = [
    [1, 'Great Fosters', 51.416741,-0.543854, RetinaHotelMarker],
    [2, 'St Matthews', 51.432327,-0.459162, RetinaChurchMarker],
    // Staines
    [3, 'Travel Lodge Staines', 51.435698,-0.514469, RetinaMarker]
];

// Geolocation Success
function success(position) {

// Create Canvas
var mapcanvas = document.createElement('div');
mapcanvas.id = 'global_map_container';
document.querySelector('article').appendChild(mapcanvas);

// Map Options
var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Create Map
var map = new google.maps.Map(document.getElementById("global_map_container"), options);

// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
var bounds = new google.maps.LatLngBounds();

// Marker Creation
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][2], markers[i][3]),
        map: map,
        flat: true,
        icon: markers[i][4]
    });

    // Find Bounds  
    bounds.extend(marker.getPosition());

    // Marker Center
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            // Center on marker
            map.setCenter(marker.getPosition());
            infowindow.setContent(markers[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

// Make Map fit all Markers
map.fitBounds(bounds);

// Get Geolocation Lat/Lng
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

// Create Geolocation Marker
var GeoMarker = new google.maps.Marker({
    position: coords,
    map: map,
    icon:RetinaCrosshair,
    title:"You are here!",
});

//Button Controls
google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() { 
    map.setCenter(GeoMarker.getPosition() );
});

}

// Run GeoLocation check
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

HTML:

<ul>
<li><a href="#" id="Map_GeoLocation" class="global_crosshair"><span>Find Me</span></a></li>
<li><a href="#" id="Map_Church" class="global_church"><span>The Church</span></a></li>
<li><a href="#" id="Map_Hotel"class="global_hotel"><span>The Venue</span></a></li>
</ul>

Answer 1

创建一个 google.maps.Markers 数组(在全局范围内)，在适当的标记上触发“点击”事件

// Marker Creation
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][2], markers[i][3]),
        map: map,
        flat: true,
        icon: markers[i][4]
    });
    gmarkers.push(marker);

    // Find Bounds  
    bounds.extend(marker.getPosition());

    // Marker Center
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            // Center on marker
            map.setCenter(marker.getPosition());
            infowindow.setContent(markers[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

然后单击第一个标记:

google.maps.event.trigger(gmarkers[0],'click');