Карта центра на окне со случайным числом

Question

Я новичок в этом форуме (это мое первое сообщение) и новичок в использовании карты google с javascript. Надеюсь, я прошу прощения, если вопрос глупо.

У меня есть договоренность с несколькими городами и вы хотите сфокусировать карту в соответствии с результатом случайного числа. Я использую прилагаемый код, но не работает. Может ли кто-нибудь увидеть, что я делаю неправильно? Спасибо.

<script> 
var myrand=0 
function initialize() { 
var i; 
var Locations = [ 
    { 
     lat: 40.7127837, 
     lon: -74.00594130000002, 
     title: "New york", 
     description: "I'm number 1" 
    }, 
    { 
     lat: 23.634501, 
     lon: -102.55278399999997, 
     title: "Mexico", 
     description: "I'm number 2" 
    }, 
    { 
     lat: 36.778261, 
     lon: -119.41793239999998, 
     title: "California", 
     description: "I'm number 3" 
    } 
]; 

var myOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(30.011902,-98.48424649999998), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

//var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 

var infowindow = new google.maps.InfoWindow({ 
    content: '' 
}); 

// loop over our array 
for (i = 0; i < Locations.length; i++) { 
    // create a marker 
    var marker = new google.maps.Marker({ 
     title: Locations[i].title, 
     position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon), 
     map: map 
    }); 

    // add an event listener for this marker 
    bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>"); 
    //bindInfoWindow(marker, map, infowindow, Locations[i].description); 
} 
} 

    function bindInfoWindow(marker, map, infowindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(html); 
      infowindow.open(map, marker); 
      //alert("seleccionado el "+html); 
     }); 
    } 

    function aleatorio(min,max) 
{ 
    myrand = Math.floor(Math.random()*(max-min+1)+min); 
    alert('salió '+ myrand); 
    map.setCenter({lat: Locations[myrand].lat, lng: Locations[myrand].lon}); 
    return Math.floor(Math.random()*(max-min+1)+min); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Answer 1

У вас есть опечатки в коде:

1. функция случайных чисел в JavaScript является Math.random, не Math.myrandom.
2. Функция aleatorio зависит от массива Locations находится в области. В настоящее время этот массив является локальным для функции инициализации. Вам нужно либо переместить aleatorio внутри функции initialize, либо переместить массив Locations в глобальное пространство имен.

proof of concept fiddle

фрагмент кода:

var myrand = 0 
 

 
function initialize() { 
 
    var i; 
 
    var Locations = [{ 
 
    lat: 40.7127837, 
 
    lon: -74.00594130000002, 
 
    title: "New york", 
 
    description: "I'm number 1" 
 
    }, { 
 
    lat: 23.634501, 
 
    lon: -102.55278399999997, 
 
    title: "Mexico", 
 
    description: "I'm number 2" 
 
    }, { 
 
    lat: 36.778261, 
 
    lon: -119.41793239999998, 
 
    title: "California", 
 
    description: "I'm number 3" 
 
    }]; 
 

 
    var myOptions = { 
 
    zoom: 4, 
 
    center: new google.maps.LatLng(30.011902, -98.48424649999998), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
    }); 
 

 
    // loop over our array 
 
    for (i = 0; i < Locations.length; i++) { 
 
    // create a marker 
 
    var marker = new google.maps.Marker({ 
 
     title: Locations[i].title, 
 
     position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon), 
 
     map: map 
 
    }); 
 

 
    // add an event listener for this marker 
 
    bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>"); 
 
    } 
 
    aleatorio(0, 2); 
 

 
    function aleatorio(min, max) { 
 
    myrand = Math.floor(Math.random() * (max - min + 1) + min); 
 
    map.setCenter({ 
 
     lat: Locations[myrand].lat, 
 
     lng: Locations[myrand].lon 
 
    }); 
 
    return Math.floor(Math.random() * (max - min + 1) + min); 
 
    } 
 
} 
 

 
function bindInfoWindow(marker, map, infowindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(html); 
 
    infowindow.open(map, marker); 
 
    //alert("seleccionado el "+html); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>