Question

我在谷歌地图中有这些标记。我需要能够根据数组的“id”部分显示或隐藏它们，使用复选框将它们切换为＆amp;关闭。

  var places = [  
  {  
    "title": "USA",  
    "description": "This is the united states",  
    "position": [ 39.639538,-104.414062 ],
    "id": "america"
  },  
  {  
    "title": "China",  
    "description": "This is the peoples republic of china",  
    "position": [ 34.016242,103.359375 ],
    "id": "asia"  
  }
]

我已经使用.each（）方法显示了标记，我尝试使用下面的jquery根据它们的id来打开和关闭它们，但标记似乎忽略了它。任何帮助将不胜感激。

 var showAmerica = $("#showAmerica");
    google.maps.event.addDOMListener(showAmerica, 'click', function(){
        $('#america').toggle();
});

复选框的HTML

<input type="checkbox" value="fund" id="showAmerica" />

Answer 1

这个“id”属性是什么？ MarkerOptions不包含它。

无论如何，要与Google Maps对象进行互动，您需要浏览gMaps API，而不是jQuery。

以下是一些代码，完全未经测试，但应该给你一个想法：

var markers = {
    "america" : [ new google.maps.Marker({ "display": false, "position": .... }) ],
    "china" : [ new google.maps.Marker({ "display": false, "position": ... }) ]
};

$('#americaButton').click(function () {
     for (var i = 0; i< markers["america"].length; i++)
         markers["america"][i].setDisplay(true);
});

Answer 2

您的代码是引用jQuery对象，而不是DOM元素。很容易得到实际的DOM元素，这是DOM监听器期望作为参数的东西。只需将.get(0)添加到第一个参数中的showAmerica变量：

var showAmerica = $("#showAmerica");
    google.maps.event.addDOMListener(showAmerica.get(0), 'click', function(){
        $('#america').toggle();
});

另外，建议您在using DevTools with the Google Maps API上观看此视频。

谷歌地图API，根据id显示和隐藏标记

2 个答案: