javascript - MarkerClusterer和地理编码器集成

我在如何在Google地图上显示标记聚类器时遇到一些麻烦。我尝试了不同的解决方案here和here，但似乎都没有用。

这是相关的代码，我得到Uncaught TypeError: Cannot read property 'addMarker' of undefined，因为这些地方没有任何东西[i]：

function initialize(item) {
        body = document.getElementById("map");
        body.innerHTML = " ";
        var positionMap = {lat: -34.397, lng: 150.644};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: positionMap
        });

        var places = [];
        var markerCluster = new MarkerClusterer(map, markers);
        var address = []
        for (var i = 0; i<item.length; i++) {
          person = item[i];
          country = person.nationality;
          address.push(country);
        };
        // console.log(address);
        var geocoder = new google.maps.Geocoder();
        var markers = [];

        for (var i = 0; i<address.length; i++) {
          (function (i) {
            geocoder.geocode({"address":address[i]}, function (results, status){
              if (status === google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;
                console.log(places[i]);
                var marker = new google.maps.Marker({position: places[i]});
                markers.push(marker);
                marker.Cluster.addMarker(marker);
              } else {
                alert("Geocode was not successful for the following reason: " + status);
              }
            });
          })(i);
        }
      }

这是地址数组，例如：["England", "England", "Ireland", "England", "Croatia", "Antigua and Barbuda", "Senegal", "Scotland", "Switzerland", "England", "England", "England", "England", "Wales", "Ireland", "Northern Ireland", "Honduras", "Scotland", "Northern Ireland", "England", "England", "England", "Senegal", "Ireland", "England", "Ireland", "Egypt", "Scotland", "Nigeria", "Uruguay", "Cote d'Ivoire"]

我的完整js代码：

var teams = [];

function find_team(team_code) {
  for(var i = 0; i < teams.length; i++) {
    if(teams[i].code === team_code) {
      return teams[i];
    }
  }
  return undefined;
}

var process_form = function(team_code) {
    // console.log(text);
    var team = find_team(team_code);
    var player_link = team._links.players;
    player = player_link.href;
};

//process player

var process_player = function() {
  // console.log(xhttp2.response)
  var data = JSON.parse(xhttp2.response);
  // console.log(data);
  var item = data.players;
  // console.log(item);
  body = document.getElementById("output");
  body.innerHTML = " ";
  for (var i = 0; i<item.length; i++) {
    person = item[i];
    name = person.name;
    value = person.marketValue;
    country = person.nationality;
    position = person.position;
    processFormPlayer(name);
    processFormPlayer(value);
    processFormPlayer(country);
    processFormPlayer(position);
  };
  initialize(item);
}

var processFormPlayer = function(text) {
  // console.log(text);
  body = document.getElementById("output");
  var add = document.createTextNode(text);
  var paragraph = document.createElement("p");
  paragraph.appendChild(add);
  body.appendChild(paragraph);
}

//dropdown menu team options
var processXHRResponse = function() {
  // console.log(xhttp.response)
  var data = JSON.parse(xhttp.response);
  // console.log(data);
  teams = data.teams;
  // console.log(teams);
  for (var i = 0; i < teams.length; i++) {
    team = teams[i];
    name = team.name;
    dropdownElement = document.createTextNode(name);
    option = document.createElement("option");
    option.value = team.code;
    option.appendChild(dropdownElement);
    document.getElementById("myteam").appendChild(option);
    // console.log(player);
  };
}

function initialize(item) {
        body = document.getElementById("map");
        body.innerHTML = " ";
        var positionMap = {lat: -34.397, lng: 150.644};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: positionMap
        });

        var places = [];
        var markerCluster = new MarkerClusterer(map, markers);
        var address = []
        for (var i = 0; i<item.length; i++) {
          person = item[i];
          country = person.nationality;
          address.push(country);
        };
        // console.log(address);
        var geocoder = new google.maps.Geocoder();
        var markers = [];

        for (var i = 0; i<address.length; i++) {
          (function (i) {
            geocoder.geocode({"address":address[i]}, function (results, status){
              if (status === google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;
                console.log(places[i]);
                var marker = new google.maps.Marker({position: places[i]});
                markers.push(marker);
                marker.Cluster.addMarker(marker);
              } else {
                alert("Geocode was not successful for the following reason: " + status);
              }
            });
          })(i);
        }
      }

var encodeParameters = function(params) {
    var strArray = [];
    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var paramString = encodeURIComponent(key) + "/" + encodeURIComponent(params[key]);
            strArray.push(paramString);
        }
    }
    return strArray.join("&");
}

// the parameters for the API request
var parameters = {
    competitions: 426,
}

// auth Token obtainable from http://api.football-data.org/register
var authToken = '2fe40f6ab37b43cca925d6fac9b05a0e';

// do the XHR request
var base_url = 'http://api.football-data.org/v1/';
var query_url = base_url + encodeParameters(parameters) + "/" + "teams";
// console.log(query_url);

var xhttp = new XMLHttpRequest();
xhttp.addEventListener('load', processXHRResponse);
xhttp.open('GET', query_url);
xhttp.setRequestHeader("X-Auth-Token", authToken);
xhttp.send();

var doSearch = function () {
  var search_term = document.getElementById("myteam").value;
  // console.log(search_term);
  process_form(search_term);
}

var searchPlayer = function() {
  // console.log(player);
  xhttp2 = new XMLHttpRequest();
  xhttp2.addEventListener('load', process_player);
  xhttp2.open('GET', player);
  // console.log(player);
  xhttp2.setRequestHeader("X-Auth-Token", authToken);
  xhttp2.send();
}

window.onload = function() {
    // console.log("ready");
    var search_button = document.getElementById("search_button");
    search_button.addEventListener("click", doSearch);
    search_button.addEventListener("click", searchPlayer);
    // search_button.addEventListener("click", initialize);
}

html代码：
    
    

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/style.css">
    <title>Football statistic</title>
</head>

<body>
    <div id="input">
        <form>
            <select id="myteam">
        <option>Select your team</option>
      </select>
            <input type="button" id="search_button" value="Search">
        </form>
    </div>

    <div id="output"></div>
    <div id="map"></div>



    <script src="js/script2.js"></script>
    <script src="js/markerclusterer.js"></script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2aUuu3eYJxW4yVvCfmwaeM3znq3_SAZk">
    </script>

</body>

</html>

最佳答案

问题1.您有：

marker.Cluster.addMarker(marker);

但是应该是：

markerCluster.addMarker(marker);

问题2。您试图在创建变量markers之前创建MarkerClusterer，并使用以下代码行：

var markerCluster = new MarkerClusterer(map, markers);