以下代码可以很好地显示标记簇,各个标记和标记属性。我在单击特定标记时显示InfoWindow时遇到问题。请检查代码:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 26.615591, lng: 74.7303109 },
mapTypeId: 'terrain'
});
//TEMP SESSION VARIABLE
<%Session["ATM_ID"] = "ABCD"; %>;
var obj = {};
obj.atm_id = '<%= Session["ATM_ID"].ToString() %>';
$.ajax({
type: "POST",
url: "clusterView.aspx/getClusterInfo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var atms = JSON.parse(response.d);
var i;
var markers = new Array();
var marker = [atms.length];
var infowindow = [atms.length];
for (i = 0; i < atms.length; i++) {
var atm = atms[i];
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(atm.LATITUDE, atm.LONGITUDE),
label: atm.ATM_ID,
title: atm.ATM_ID,
animation: google.maps.Animation.DROP,
});
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">' + atm.ATM_ID + '</h1>' +
'<div id="bodyContent">' +
'<p>Location: ' + atm.LOCATION + '</p>' +
'<p>ATM Profile: Check Here->, <a href="./ATM_Profile.aspx?ATM_ID="' + atm.ATM_ID + '></p>' +
'</div>' +
'</div>';
infowindow[i] = new google.maps.InfoWindow({
content: contentString
});
marker[i].addListener('click', function () {
console.log('clicked ' + marker[i].title + ' -- ' + infowindow[i].content);
infowindow[i].open(map, marker[i]);
});
markers.push(marker[i]);
}
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
},
failure: function (response) {
alert(response.d);
}
});
}
标记正在添加并且也正确地聚类了。但是单击任何标记都会显示上述错误。我无法追踪问题。标记详细信息在marker [i] .addListener()方法外部可用,但是在方法内部却出错。 任何帮助都是对此事的帮助。
答案 0 :(得分:0)
如果我对您的标记进行硬编码,我不会收到此错误。请测试以下代码:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var locations = [
{ lat: -31.563910, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.750000, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.773700, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438000 },
{ lat: -43.999792, lng: 170.463352 }
]
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { lat: -31.563910, lng: 147.154312 },
mapTypeId: 'terrain'
});
var obj = {};
var markers = new Array();
var marker = {};
var infowindow = {};
for (let i = 0; i < locations.length; i++) {
var atm = locations[i];
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(atm.lat, atm.lng),
label: i.toString(),
title: i.toString(),
animation: google.maps.Animation.DROP,
});
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">' + i + '</h1>' +
'<div id="bodyContent">' +
'<p>Location: ' + atm.lat + "," + atm.lng + '</p>' +
'<p>ATM Profile: Check Here->, <a href="./ATM_Profile.aspx?ATM_ID="' + i + '></p>' +
'</div>' +
'</div>';
infowindow[i] = new google.maps.InfoWindow({
content: contentString
});
marker[i].addListener('click', function() {
console.log('clicked ' + marker[i].title + ' -- ' + infowindow[i].content);
infowindow[i].open(map, marker[i]);
});
markers.push(marker[i]);
}
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
}
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>
</body>
</html>
因此,问题可能出在您的Ajax的URL或响应中。请发布示例数据,以便我们能够从我们的身边重现此错误并提供进一步的帮助。