Интеграция MarkerClusterer и геокодера

У меня возникли проблемы с отображением маркерного кластера на моей карте Google. Я пробовал разные решения here и here, но ни один из них не работает.Интеграция MarkerClusterer и геокодера

Это соответствующий код и я получаю Uncaught TypeError: Cannot read property 'addMarker' of undefined, потому что нет ничего в местах [я]:

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>

источник

2016-12-16 Jure Štabuc

Без дальнейшей отладки: 'marker.Cluster.addMarker (маркер);', вероятно, следует 'markerCluster.addMarker (маркер);' – gearsdigital

Задача 1. У вас есть:

marker.Cluster.addMarker(marker);

Но это должно быть:

markerCluster.addMarker(marker);

Проблема 2. Вы пытаетесь создать свой MarkerClusterer до того как вы создали переменная markers, с этой линии:

var markerCluster = new MarkerClusterer(map, markers);

источник

2016-12-16 10:47:37 duncan

Правильно, исчезла ошибка. Но проблема все еще существует, нет никаких маркеров на карте, теперь я получаю только пустую 'places': ' .E латом : () аргументов : нуля вызывающих : нуля длина : имя : "" прототип : Объект __proto__ : () [[FunctionLocation]] : JS ключ = AIzaSyA2aUuu3eYJxW4yVvCfmwaeM3znq3_SAZk:? 42 [[Скоупс]] : Области применения [3] LNG : () аргументы : нулевые абонент : нуль длина : Имя : « –

Что делает ваш' console.log (места [i]); 'print? – mxlse

пуст, без каких-либо значений: '_.E lat:() lng:() __ proto__: Object' –

я использовал 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); 
      } 
      }); 

     } 
     }

источник

2016-12-16 11:53:28

ответ

Смежные вопросы