如何切换标记？ [英] How do I toggle markers?

问题描述

我的代码用于制作标记：

  for（标记中的var标记）{
 var posMarker = new google .maps.Marker（{
 position：new google.maps.LatLng（markers [marker] .lat，markers [marker] .ng），
 map：map，
 visible：markers [ marker] .visible 
}）; 
}; 
  

我的标记对象：

  var markers = {
London：{lat：-83.68088192646843，lng：-125.270751953125，type：town，visible：false}，
Paris：{lat：-58.1548020417031，lng：-21.318115234375，type：town，visible：false}，
}; 
  

我试图用复选框来切换标记，如下所示：

$ $ $ $'code $（'＃toggle'）。change（function（）{
for（var marker in markers）{
posMarker.setVisible（true）;
};
}）;

但是只显示数组中的最后一个标记，我该如何使它们全部出现？ / p>

谢谢。

解决方案

> posMarker 被用作放置Google Maps标记的临时变量，随着for循环的进行， posMarker 引用更新到最新的标记放置。这就是为什么只显示最后一个标记。

您需要跟踪所有对Google地图标记的引用，包括那些已被消耗的引用。我的方法使用一个对象，就像您的标记对象，但保留对Google地图标记的引用。你也可以使用普通的索引数组（posMarkers []）。这取决于你。

请参阅 演示 ，请注意LatLngs已被修改为简单（看起来像您有一个自定义坐标系统）。

另外，我没有这个改变，但我只注意到在标记，中调用 marker > city in markers 因为您的对象被写入的方式。它会更具可读性，但不会影响执行。

最后，分号在 for loops blocks are unneeded，and careful with the尾随逗号在 Paris 对象（我猜你刚刚删除了列表的其余部分）。在这种情况下，这并不重要，但其他时候，这些尾随的逗号可能是难以发现的错误的来源。

  function initialize（）{
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 var marker = {
London：{lat：0，lng：0，type：town，visible：false}，
Paris ：{lat：10，lng：10，type：town，visible：false} 
}; 
 
 var posMarkers = {}; 
 
（标记中的var标记）{
 posMarkers [marker] = new google.maps.Marker（{
 position：new google.maps.LatLng（markers [marker] .lat，markers [marker] .lng），
 map：map，
 visible：markers [marker] .visible 
}）; 
 
 $ b $（'＃toggle'）。change（function（）{
（标记中的var标记）{
 if（posMarkers [marker]）。 getVisible（））{
 posMarkers [marker] .setVisible（false）; 
} 
 else {
 posMarkers [marker] .setVisible（true）; 
} 
} 
}）; 
} 
  

My code to make markers:

for (var marker in markers) {
    var posMarker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
        map: map,
        visible: markers[marker].visible
    });     
};

My markers object:

var markers = {
        "London": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town", "visible": false},
        "Paris": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town", "visible": false},
};

I'm trying to be able to toggle the markers with a checkbox like so:

$('#toggle').change(function() {
    for (var marker in markers) {
        posMarker.setVisible(true);
    };
}); 

But only the last marker in the array is shown, how do I make all of them appear?

Thanks.

解决方案

Well, I see posMarker being used as a temporary variable that places a Google Maps marker, and as the for loop progresses, the posMarker reference "updates" to the latest marker placed. That's why only the last marker is being shown.

You need to keep track of all references to Google Maps markers being placed, including those that have been "consumed". My approach uses an object, much like your markers object but holding references to Google Maps markers. You could also use a plain indexed array (posMarkers[]). It's up to you.

See the Demo, note the LatLngs have been modified for simplicity (looks like you have a custom coordinate system).

Also, I didn't make this change, but I just noticed that it may make more sense to call marker in markers, city in markers because the way your object is written. It would be more readable, but won't affect the execution.

Finally, semicolons at the end of for loops blocks are unneeded, and be careful with the trailing comma after the Paris object (I'm guessing you just erased the rest of the list). In this case it didn't matter, but other times these trailing commas can be a source of hard-to-find bugs.

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var markers = {
      "London": {"lat": 0, "lng": 0, "type": "town", "visible": false},
      "Paris": {"lat": 10, "lng":  10, "type": "town", "visible": false}
    };

    var posMarkers = {};

    for (var marker in markers) {
      posMarkers[marker] = new google.maps.Marker({
        position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
        map: map,
        visible: markers[marker].visible
      });     
    }

    $('#toggle').change(function() {
      for (var marker in markers) {
        if(posMarkers[marker].getVisible()) {
          posMarkers[marker].setVisible(false);
        }
        else {
          posMarkers[marker].setVisible(true);
        }
      }
    }); 
  }

这篇关于如何切换标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！