我有一个包含5个标记的地图，鼠标单击时每个标记都需要一个信息窗口，我有一个可以工作的infoWindow。但是，当我为另一个标记的另一个infoWindow添加代码/数据时，它不起作用（即，我单击爱丁堡的标记，并显示一个气泡，但图表不显示，而当我单击该标记时，则什么也没有显示因弗内斯标记）。
链接到JSFIDDLE文件：https://jsfiddle.net/MarnieMaclean/megx2cbo/30/
代码段：我目前有2/5个标记的InfoWindow数据。
google.charts.load('current', {packages: ['corechart']});
function drawChart(map, marker) {
//set up data
var data = google.visualization.arrayToDataTable([
['Genre', '#'],
['Science Fiction', 55],
['Comedy', 33],
['Thriller', 21],
['Action', 63],
['Romance', 17],
]);
//set up any options
var options = {
title: 'Film Genre Preferences'
};
//Create node
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.BarChart(node);
//chjjeck which marker it is
if (marker.id == 'c4') {
chart.draw(data, options);
}
infoWindow.setContent(node);
infoWindow.open(map,marker);
}
google.charts.load('current', {packages: ['corechart']});
function drawChart(map, marker) {
//set up data
var data = google.visualization.arrayToDataTable([
['Genre', '#'],
['Science Fiction', 41],
['Comedy', 27],
['Thriller', 13],
['Action', 15],
['Romance', 19],
]);
//set up any options
var options = {
title: 'Film Genre Preferences'
};
//Create node
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.BarChart(node);
//chjjeck which marker it is
if (marker.id == 'c1') {
chart.draw(data, options);
}
infoWindow.setContent(node);
infoWindow.open(map,marker);
}
// Initialize and add the map
function initMap() {
//The location of Inverness
var inverness = {lat: 57.480819, lng: -4.224250};
var city1 = {position: inverness};
// The map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker positioned at Inverness
var marker1 = new google.maps.Marker({position: inverness, map: map, id: 'c1', title: 'Number Of Cinemas: 2'});
//The location of Dundee
var dundee = {lat: 56.467546, lng: -2.969593};
var city2 = {position: dundee};
// The marker, positioned at Dundee
var marker2 = new google.maps.Marker({position: dundee, map: map, id: 'c2', title: 'Number Of Cinemas: 2'});
//The location of Glasgow
var glasgow = {lat: 55.875362, lng: -4.250252};
var city3 = {position: glasgow};
// The marker, positioned at Glasgow
var marker3 = new google.maps.Marker({position: glasgow, map: map, id: 'c3', title: 'Number Of Cinemas: 11'});
//The location of Edinburgh
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city4 = {position: edinburgh};
// The marker, positioned at Edinburgh
var marker4 = new google.maps.Marker({position: edinburgh, map: map, id: 'c4', title: 'Number Of Cinemas: 3'});
//The location of Aberdeen
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city5 = {position: aberdeen};
// The marker, positioned at Aberdeen
var marker5 = new google.maps.Marker({position: aberdeen, map: map, id: 'c5', title: 'Number Of Cinemas: 3'});
marker4.addListener('click', function() {
drawChart(map,this);
});
}
Proof of infoWindow working for one marker
答案 0 :(得分：0)
您的数据无处不在，请不要使用位置名称创建无用的变量。
您已经了解JS中的数据结构！使用它们。
const locations = [{
id: 'c1',
name: 'inverness',
title: 'Number Of Cinemas: 2',
lat: 57.480819,
lng: -4.224250,
chart: [
['Genre', '#'],
['Science Fiction', 55],
['Comedy', 33],
['Thriller', 21],
['Action', 63],
['Romance', 17],
]
},
// Etc.....
]
比，为了得到想要的-一切都变得简单得多。只需循环数据：
locations.forEach(loc => initMarker(loc, map, infowindow));
示例：
const locations = [{
id: 'c1',
name: 'Inverness',
title: 'Number Of Cinemas: 2',
lat: 57.480819,
lng: -4.224250,
chart: [
['Genre', '#'],
['Science Fiction', 55],
['Comedy', 33],
['Thriller', 21],
['Action', 63],
['Romance', 17],
]
},
{
id: 'c2',
name: 'Dundee',
title: 'Number Of Cinemas: 2',
lat: 56.467546,
lng: -2.969593,
chart: [
['Genre', '#'],
['Science Fiction', 41],
['Comedy', 27],
['Thriller', 13],
['Action', 15],
['Romance', 19],
]
},
{
id: 'c3',
name: 'Glasgow',
title: 'Number Of Cinemas: 11',
lat: 55.875362,
lng: -4.250252,
chart: [
['Genre', '#'],
['Science Fiction', 10],
['Comedy', 45],
['Thriller', 63],
['Action', 15],
['Romance', 7],
]
},
{
id: 'c4',
name: 'Edinburgh',
title: 'Number Of Cinemas: 3',
lat: 55.959425,
lng: -3.189161,
chart: [
['Genre', '#'],
['Science Fiction', 23],
['Comedy', 61],
['Thriller', 7],
['Action', 66],
['Romance', 46],
]
},
{
id: 'c5',
name: 'Aberdeen',
title: 'Number Of Cinemas: 3',
lat: 57.155988,
lng: -2.095139,
chart: [
['Genre', '#'],
['Science Fiction', 36],
['Comedy', 9],
['Thriller', 13],
['Action', 56],
['Romance', 34],
]
},
];
function infowindowContent(loc) {
var EL_infowindow = document.createElement('div');
var options = {
title: `${loc.name} Film Genre Preferences`
};
var chart = new google.visualization.BarChart(EL_infowindow);
var data = google.visualization.arrayToDataTable(loc.chart);
chart.draw(data, options);
EL_infowindow.id = 'infowindow';
return EL_infowindow;
}
function initMarker(loc, map, infowindow) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(loc.lat, loc.lng),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent(infowindowContent(loc));
infowindow.open(map, marker);
});
}
// Initialize and add the map
function initMap() {
google.charts.load('current', {
packages: ['corechart']
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(locations[0].lat, locations[0].lng)
});
var infowindow = new google.maps.InfoWindow(); // One instance
locations.forEach(loc => initMarker(loc, map, infowindow));
}#map {
height: 400px;
width: 100%;
}<div id="map"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>