在循环中向Google地图添加标记不起作用

Question

我正在尝试将几个随机标记加载到Google Map。当我运行以下脚本时，它只生成一个在map init函数中引用的标记。我完全难过了。非区域是在声明addMarker函数之后。我知道循环是通过console.log运行的，但它没有在地图上放置标记。

var map;
var northeast;
var southeast;
var northwest;
var southwest;
var markers = [];
var lat = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
var lng = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;

function initMap() {  
  var randomMarker = {lat: lat, lng: lng}; 

 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: 0, lng: 0},
    mapTypeId: 'terrain',
    disableDefaultUI: true,
    zoomControl: false,
    scrollwheel: false,
    draggable: false
  }); 

   // Adds a marker at the center of the map.   
  addMarker(randomMarker);
}

 // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map,
          animation: google.maps.Animation.DROP,
          icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
          scaledSize: new google.maps.Size(22, 22)
        });
        for (var i = 0; i < 10; i++) {
            markers.push(marker);
        }
      }


// Test loop

function testHello() {
  for (var i = 0; i < 10; i++) {
    console.log("hello world");
  }
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Checkbox function for Northeast quadrant
$('#neVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});

// Checkbox function for Southeast quadrant
$('#seVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});


// Checkbox function for Northwest quadrant
$('#nwVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});


// Checkbox function for Southwest quadrant
$('#swVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});

Answer 1

addMarker函数仅从initMap函数调用一次。

// Adds a marker at the center of the map.   
  addMarker(randomMarker);

addMarker函数将只创建一个标记

// Adds a marker to the map and push to the array.

 function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
      scaledSize: new google.maps.Size(22, 22)
    });
    for (var i = 0; i < 10; i++) {
        markers.push(marker);
    }
  }

for循环将相同的标记添加到markerArray 10次。

for (var i = 0; i < 10; i++) {
    markers.push(marker);
}

因此，所有标记都将绘制在同一点上，看起来您在地图上只有一个标记。为了解决这个问题，您需要多次调用addMarker函数并按如下方式更改它：

function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP,
    icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
    scaledSize: new google.maps.Size(22, 22)
  });

  markers.push(marker);
}

这将创建一个新标记并将其添加到markers数组中。编辑initMap函数以创建随机坐标并在这些位置添加标记。尝试缩小地图以一起查看所有标记。

function initMap() {  

 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: 0, lng: 0},
    mapTypeId: 'terrain',
    disableDefaultUI: true,
    zoomControl: false,
    scrollwheel: false,
    draggable: false
  }); 

  for (var i = 0; i < 10; i++) {
    var lat = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
    var lng = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;
    var randomMarker = {lat: lat, lng: lng}; 

   // Adds a marker at the center of the map.   
   addMarker(randomMarker);
  }
}