无法在标记上显示InfoWindow onClick事件

问题描述 投票：-1回答：1

下面的代码可以很好地显示标记簇，各个标记和标记属性。我在单击特定标记时显示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);
        }
    });
}

enter image description here

正在添加标记，并且也正确地对其进行了聚类。但是单击任何标记都会显示上述错误。我无法追踪问题。标记详细信息在marker [i] .addListener（）方法外部可用，但是在方法内部却出错。任何帮助在此事上都会得到帮助。

javascript google-maps maps markerclusterer
1个回答
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或响应中。请发布示例数据，以便我们可以从我们的身边重现此错误并提供进一步的帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.