如何用jQuery隐藏谷歌地图Api标记

你好，这可能是一个非常愚蠢的问题，但我试图让他们点击时标记消失。标记位于地图上，但当我点击它时，它不会执行任何操作。我想知道为什么它不工作。谢谢！如何用jQuery隐藏谷歌地图Api标记

<script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     var myOptions = { 
     center: new google.maps.LatLng(40.1, -88.2), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var myLatlng = new google.maps.LatLng(40.1, -88.2); 
     var temp_marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title:"Hello World!" 
     }); 

     console.log($(temp_marker)); 
     console.log(temp_marker); 

     //temp_marker.click(function(){$(this).hide();}); 

     $(temp_marker).click(function(){console.log("click is working"); $(this).hide();}); 
      }); 
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

来源

2012-03-07 wayfare

temp_marker是Javascript对象，而不是DOM元素。要监听器连接到标记（该API将处理其DOM元素附加到如何具体），你应该使用谷歌地图API的自己的事件系统，如：

google.maps.event.addListener(marker, 'click', function() { 
    marker.setVisible(false); // maps API hide call 
    });

他们的文档：Google Maps Javascript API v3 - Events

来源

2012-03-07 00:42:44

这是否意味着我无法将jQuery应用于大多数Google地图对象？ – wayfare 2012-03-07 00:50:08

@wayfare Maps API在它为标记和实现者创建的DOM元素之间插入一层抽象。可能有技巧直接访问DOM元素，但不支持路径。一旦谷歌地图进行内部更改，任何试图直接操纵元素的尝试都会受到破坏;它也可能不适用于跨浏览器。 – 2012-03-07 02:27:28

如果添加优化选项：虚假的标记声明中，您可以通过jQuery的访问它，但是当你移动地图，放大或缩小，因为这样的API重置所有的配置，默认的，最好的方法是使用setVisible，因为它会保持该配置。 – Corner 2015-09-04 19:54:43

是一个谷歌地图对象，而不是DOM元素。 Jquery在DOM元素上工作。

来源

2012-03-07 00:43:02 charlietfl

我不知道，你可以只隐藏的盯防，但是Click事件相应的钩子，将在声明

google.maps.event.addListener(marker, 'click', function() { 
    // do your hide here 
});

做这样的事情你可能必须删除标记从地图而不是“隐藏”它。

你想隐藏标记的是什么？你必须能够重新显示标记吗？你打算怎么做到这一点？

来源

2012-03-07 00:48:11

本为您提供了一半的答案。一旦你能够检测到标记点击事件，你需要“隐藏”或从地图上移除标记。与谷歌地图这样做的标准方法是做到这一点：

this.setMap(null);

然后，您可以显示在地图使用的setMap指定地图对象，而不是空再次。

来源

2012-03-07 17:28:39

扩展在本手记，这应该去的地方，你已经宣布你的标记 - 例如：

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image 
}); 
google.maps.event.addListener(beachMarker, 'click', function() { 
    beachMarker.setVisible(false); // maps API hide call 
}); 
}

这是我花年龄试图弄清楚这一点。巨大的功劳给本！谢谢！

来源

2014-05-23 14:10:38

如何用jQuery隐藏谷歌地图Api标记

回答

相关问题