Google地图:显示外部点击的特定标记

时间:2015-11-28 18:59:18

标签: javascript jquery google-maps google-maps-api-3

我有一个网站,其中有一个包含位置列表的索引页面和一个可视化地显示它们的地图页面。我正在尝试创建一个操作,我可以单击索引页面上的建筑位置,地图页面将打开并仅显示该位置的标记。使用我目前拥有的代码(下面),它几乎可以工作,但它每次都会为第一个位置显示标记。现在我想弄清楚我是否可以改变我的代码,以便放置的标记对应于正确的位置。任何建议将不胜感激:)

相关的INDEX页码:

<div id="phil" class="space cub ope food"> 
       <h2>location one</h2>
       <div class="locate" onclick="location.href='map.html'; myclick(0);"><h5><em>mhp 2nd floor</em></h5></div>
</div>

<div id="nann" class="space res gro lou roo caf food soft prnt">
        <h2><a href="ann.html">location five</a></h2>
        <div class="locate" onclick="location.href='map.html'; myclick(4);"><h5><em>ann</em></h5></div>
</div>

MAP页面代码:

    <div id="map"></div>

  <script type="text/javascript">
    var gmarkers = [];
    var locations = [
      ['<h4><a href="phil.html">location one</a></h4>MHP 2nd floor', 34.01885, -118.286808],
      ['<h4><a href="cc.html">location two</a></h4>TCC 1st floor', 34.020004, -118.286186],
      ['<h4><a href="kort.html">location three</a></h4>STU 311', 34.020246, -118.285924],
      ['<h4><a href="daut.html">location four</a></h4>VPD', 34.019005, -118.283855],
      ['<h4><a href="ann.html">location five</a></h4>ANN (301)', 34.020897, -118.287],
      ['<h4><a href="court.html">location six</a></h4>outside VPD', 34.019075, -118.283811],
      ['<h4><a href="arch.html">location seven</a></h4>WAH basement', 34.019221, -118.287797],
      ['<h4><a href="sea.html">location eight</a></h4>SSL 1st floor', 34.019557, -118.288741],
      ['<h4><a href="salv.html">location nine</a></h4>SAL 125', 34.019666, -118.289578],
      ['<h4><a href="king.html">location ten</a></h4>', 34.024845, -118.287958],
      ['<h4><a href="elli.html">location eleven</a></a></h4>TCC 222', 34.020102, -118.286574],
      ['<h4><a href="vc.html">location twelve</a></h4>VKC basement', 34.021211, -118.283709],
    ];


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: new google.maps.LatLng(34.021622, -118.28633),
      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]),
        animation: google.maps.Animation.DROP,
        map: map,
      });

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

       gmarkers[ids] = marker;
    }
this.myclick=function(i) {
        google.maps.event.trigger(gmarkers[i], 'click');
    };
  </script>

1 个答案:

答案 0 :(得分:0)

您只使用一个标记但需要更多标记。

尝试添加一个标记数组,而不仅仅是这样

  var marker = [];
  var i;

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

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