窗口中心地图与随机数

Question

我是这个论坛的新手（这是我的第一篇文章）和初学者使用谷歌地图与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

代码段

＆＃13;
＆＃13;
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);
＆＃13;
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
＆＃13;
＆＃13;
＆＃13;