javascript - Google map API 圆圈图标

Question

我正在尝试使用 Google Maps API 和红点图标(又名地震图标)制作 map 。

我有几个位置和几个震级，因为某些震级较低，因此不会很明显，因此红点图标仅适用于某些位置。

var marker1;
var marker2
for (var i = 0; i < locations.length; i++) {

    if (locations[i][3] > 5){
        alert("I am in");}  
        marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: getCircle(locations[i][3])
        }); 
    if(locations[i][3] < 5){
        marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            animation: google.maps.Animation.BOUNCE
        });
    }
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker1);
    }
  })(marker1, i)); 
}

问题出在marker1上。因为如果我尝试将标记限制在震级高于 5 的位置，它将不会设计单个图标，并且警报甚至不会被触发。

但是如果我从“if”语句中删除marker1的代码(如示例)，则会触发警报并且图标会出现在 map 上。

可以毫无问题地过滤标记 2。

为什么会这样？我只是简单地将“}”移到下面几行。我无法理解。

感谢您的帮助!

Answer 1

该代码非常复杂，并且它使用两个全局 marker1 和 marker2 变量的方式，它不可能执行您希望它执行的任何操作。

我不太清楚您想要代码做什么，但是我可以向您展示一种更简洁的编码方法吗？这可能是朝着正确方向迈出的一步？

for( var i = 0;  i < locations.length;  i++ ) {
    addMarker( locations[i] );
}

function addMarker( location ) {
    var lat = location[1], lng = location[2],
        magnitude = location[3], content = location[0];

    var options = {
        position: new google.maps.LatLng( lat, lng ),
        map: map
    };

    if( magnitude > 5 ) {
        options.icon = getCircle( magnitude );
    }
    else {
        options.animation = google.maps.Animation.BOUNCE;
    }

    var marker = new google.maps.Marker( options );

    google.maps.event.addListener( marker, 'click', function() {
        infowindow.setContent( content );
        infowindow.open( map, marker );
    });
}

值得注意的差异:

• 没有全局 marker1 和 marker2 变量。相反，每个标记都有自己的标记变量。
• 对 addMarker() 方法的简单调用即可创建所需的闭包，而不是复杂的函数返回函数。
• 对所有这些 locations[i][n] 属性使用命名变量以使其更具可读性。
• 处理幅度恰好为 5 的情况，原始代码会跳过该情况。 (如果需要，请将测试从 > 5 更改为 >= 5。)
• 合并了两个 google.maps.Marker() 调用以避免重复。

希望这能让您更轻松地了解发生了什么以及您需要做什么。