Question

所以我在我的网页上有一个带有标记的谷歌地图，基本上想要点击我设置的标记来激活相应的accodion菜单项..我该怎么做？

地图上标记的javascript ...

 <script type="text/javascript">
    var locations = [
      ['Willow Bank', 53.3929025,-2.9339415,17],
      ['Landmark', 53.3943626, -2.936234,18]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(53.3925822,-2.9266926,16.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>

和使用jquery ui accodion的accorion项....

<div id="accordion">
    <h3><a href="#">1. LANDMARK</a></h3>
    <div>HELLO WORLD !! </div>
    <h3><a href="#">2. WILLOWBANK</a></h3>
    <div>HELLO WORLD !!</div>

任何帮助都非常感谢

Answer 1

<style>
#map {
  height: 400px;
}
</style>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
  function initialize() {
    // make sure the <a class="maps"> elements have the same order as the locations
    var locations = [
      ['Landmark', 53.3943626, -2.936234, 18],
      ['Willow Bank', 53.3929025, -2.9339415, 17]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(53.3925822,-2.9266926,16.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          // induce a click on the <h3><a></a></h3>
          $("#accordion").find('.maps').eq(i).trigger('click');
        }
      })(marker, i));
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  $(document).ready(function() {
    $("#accordion").accordion();
  });
</script>
<div id="map"></div>
<div id="accordion">
    <h3><a class="maps" href="#">1. LANDMARK</a></h3>
    <div>HELLO WORLD !! </div>
    <h3><a class="maps" href="#">2. WILLOWBANK</a></h3>
    <div>HELLO WORLD !!</div>
</div>

注意，我有点懒惰;我触发了一个单击锚点而不是使用jQuery-ui手风琴方法

如何点击谷歌地图标记打开手风琴项目

1 个答案: