循环向谷歌地图添加标记不起作用

Question

我正在尝试将几个随机标记加载到谷歌地图。当我运行以下脚本时，它只生成一个在 map init 函数中引用的标记。我完全被难住了。非区域是在 addMarker 函数的声明之后。我知道循环是通过控制台运行的.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);
}

这将创建一个新标记并将其添加到标记数组中。 编辑 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);
}
}