javascript - MarkerClusterer 和地理编码器集成

Question

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

这是相关的代码，我得到了 Uncaught TypeError: Cannot read property 'addMarker' of undefined 因为 places[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", "瑞士"、"英格兰"、"英格兰"、"英格兰"、"英格兰"、"威尔士"、"爱尔兰"、"北爱尔兰"、"洪都拉斯"、"苏格兰"、"北爱尔兰"、"英格兰"、"英格兰”、“英格兰”、“塞内加尔”、“爱尔兰”、“英格兰”、“爱尔兰”、“埃及”、“苏格兰”、“尼日利亚”、“乌拉圭”、“科特迪瓦”]

我的完整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>

Answer 1

问题 1. 你有:

marker.Cluster.addMarker(marker);

但应该是:

markerCluster.addMarker(marker);

问题 2。您尝试在创建变量 markers 之前创建您的 MarkerClusterer，使用以下行:

var markerCluster = new MarkerClusterer(map, markers);