1

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

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

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 的代码，则会触发警报并且图标会出现在地图上。

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

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

谢谢您的帮助！

4

1 回答 1

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

希望这将使您更容易弄清楚发生了什么以及您需要做什么。

于 2013-05-02T16:39:03.130 回答