Question

我正在尝试使用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。

为什么这样工作？我只需将“}”移动到下面几行。我不明白。

感谢您的帮助！

Answer 1

该代码非常复杂，并且它使用两个全局marker1和marker2变量的方式，它不可能做任何你想要它做的事情。

我不完全清楚你做想要代码做什么，但是我可以向你展示一种更清晰的编码方式，这可能是朝着正确方向迈出的一步吗？ / p>

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()方法的简单调用会创建所需的闭包，而不是复杂的函数return-a-function。
对所有locations[i][n]属性使用命名变量，使其更具可读性。
处理大小正好为5的情况，即原始代码跳过的情况。（如果需要，请将测试从> 5更改为>= 5。）
合并两个google.maps.Marker()来电，以避免重复。

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

Google Maps API圈图标

1 个答案: