我第一次涉足 Google Maps API,我希望在点击时出现独特的内容(每个标记的差异 iframe youtube vid)。我曾经做过一次,但是当单击另一个信息窗口时,我无法关闭一个信息窗口。
我正在尝试更改以下演示代码以在单击另一个时打开一个,但无法根据单击的标记来更改内容。
var Demo = {
map: null,
infoWindow: null
};
/**
* Called when clicking anywhere on the map and closes the info window.
*/
Demo.closeInfoWindow = function() {
Demo.infoWindow.close();
};
/**
* Opens the shared info window, anchors it to the specified marker, and
* displays the marker's position as its content.
*/
Demo.openInfoWindow = function(marker) {
var markerLatLng = marker.getPosition();
Demo.infoWindow.setContent([
'<b>Marker position is:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng()
].join(''));
Demo.infoWindow.open(Demo.map, marker);
},
/**
* Called only once on initial page load to initialize the map.
*/
Demo.init = function() {
// Create single instance of a Google Map.
var centerLatLng = new google.maps.LatLng(0, 0);
Demo.map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: centerLatLng,
zoom: 2,
maxZoom:3,
minZoom:2,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create a single instance of the InfoWindow object which will be shared
// by all Map objects to display information to the user.
Demo.infoWindow = new google.maps.InfoWindow();
// Make the info window close when clicking anywhere on the map.
google.maps.event.addListener(Demo.map, 'click', Demo.closeInfoWindow);
// Add multiple markers in a few random locations around San Francisco.
// First random marker - CHINA
var marker1 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(33.4, 103.8),
});
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker1, 'click', function() {
Demo.openInfoWindow(marker1);
});
// Second random marker - Uruguay
var marker2 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(-32.81, -55.88),
});
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker2, 'click', function() {
Demo.openInfoWindow(marker2);
});
}
我知道我需要为每个标记上包含 iframe 的内容创建一个变量,但我不知道足够的 js 来做到这一点,然后让它正确拉入 infoWindow。
任何和所有的帮助表示赞赏。谢谢!