MarkerClusterer 和地理编码器集成

Question

我在 Google 地图上显示标记聚类器时遇到了一些问题。我尝试了不同的解决方案 here and here 但 none 似乎有效。

这是相关代码，我得到 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>

Answer 1

问题 1。您有：

marker.Cluster.addMarker(marker);

但应该是：

markerCluster.addMarker(marker);

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

var markerCluster = new MarkerClusterer(map, markers);

Answer 2

我使用 this 示例来修改我的代码并且有效：

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 = [];
        for (var i = 0; i<item.length; i++) {
          person = item[i];
          country = person.nationality;
          places.push(country);
        };
        console.log(places);
        var markers=[];
        var markerCluster = new MarkerClusterer(map, markers);

        geocoder = new google.maps.Geocoder();
        for (var i = 0; i<places.length; i++) {
          geocoder.geocode({"address":places[i]}, function(results, status){
            if (status === google.maps.GeocoderStatus.OK) {
              position = results [0].geometry.location;
              var marker = new google.maps.Marker({
                map: map,
                position: position
              });
              markers.push(marker);
              markerCluster.addMarker(marker);
            }
          });

        }
      }

MarkerClusterer 和地理编码器集成

MarkerClusterer and geocoder integration

javascript

geocoding

google-maps-api-3

marker

markerclusterer