1
對不起，如果這已被回答在別的地方，但當我添加一個偵聽器到我的地圖，它會導致我的標記隱藏/不加載，所以有人可以解釋如何加載infowindow和中心到標記點擊？Google地圖中心和InfoWindow
繼承人到目前爲止我的代碼：
<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '600px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
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
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
// Geolocation
var marker = new google.maps.Marker({
position: coords,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
title:"You are here!",
});
// Great Fosters
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.416741,-0.543854),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
title:"Great Fosters",
});
// St Matthews
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432327,-0.459162),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
title:"St Matthews",
});
// ----- STAINES HOTELS - START -----
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.435698,-0.514469),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"Travel Lodge Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432156,-0.51617),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"Thames Lodge Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.43218,-0.516293),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"The Boleyn Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432534,-0.516422),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"The Swan Staines",
});
// ----- STAINES HOTELS - END -----
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
編輯：
我現在已經改變了我的代碼，包括陣列，它工作得很好，但現在我要標記到地圖時，在中央點擊，我想所有的標記都在窗口中，但fitBounds似乎沒有做任何事情。它可以在這裏http://www.everythingcreative.co.uk/marker
<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
var markers = [
['Great Fosters', 51.416741,-0.543854, 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'],
['St Matthews', 51.432327,-0.459162, 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'],
// Staines
['Travel Lodge Staines', 51.435698,-0.514469, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Thames Lodge Staines', 51.432156,-0.51617, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Boleyn Staines', 51.43218,-0.516293, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Swan Staines', 51.432534,-0.516422, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
// Surrey
['The Runnymede Hotel', 51.43751,-0.537544, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Wheatsheaf Hotel', 51.409151,-0.592704, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Premier Inn Sunbury', 51.419322,-0.42248, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Crown Chertsey', 51.39181,-0.501861, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
// Heathrow
['Sofitel Heathrow', 51.473478,-0.49152, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Marriott Heathrow', 51.481263,-0.438209, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Premier Inn Heathrow', 51.481615,-0.482288, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png']
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '600px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
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
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: markers[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
// Geolocation
var GeoMarker = new google.maps.Marker({
position: coords,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
title:"You are here!",
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
要重複使用相同的變量'marker'因此對於所有標記他們不存儲和手柄丟失。你可以創建一個數組並將所有創建的標記存儲在該數組中，然後調用它們並使用markerName.visible（'true'） –
嗨，我該怎麼做？或者你能指導我到哪裏我可以學習陣列？ –
其實我現在明白了，但是如何在數組中定義圖標和infowindow呢？ –