使用网址哈希触发Google地图信息窗口 [英] Trigger Google map info window with URL hash

问题描述

我目前有一个带有多个标记的Google地图，我试图使用该网址触发所需标记以显示其信息窗口。

网址'/ index.html＃1'第一个标记会打开其信息窗口，如果'/ index.html＃2'第二个标记会打开其信息窗口。

我被建议使用 google.maps.event.trigger（标记[urlhash]，'点击'）; t似乎会触发信息窗口？

任何和所有的建议将不胜感激，谢谢。 strong>获取URL（/index.html#1）：

  var urlhash = window.location.hash。更换（'＃'，''）; 
  

Google地图：

  / * Google地图* / 
函数googleMap（）{
 var locations = [
 ['Bondi Beach'，-33.890542，151.274856 ，
 ['Coogee Beach'，-33.923036,151.259052,5]，
 ['Cronulla Beach'，-34.028249,151.157507,3]，
 ['Manly Beach'， -33.80010128657071,151.28747820854187,2]，
 ['Maroubra Beach'，-33.950198,151.259302,1] 
]; 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：10，
 center：new google.maps.LatLng（-33.92，151.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]，地点[i] [2]），
 map：map 
}）; 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 map.panTo（marker.getPosition（））; 
 infowindow.setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
}; 
}）（marker，i））; 
} 
 
 if（urlhash）{
 google.maps.event.trigger（markers [urlhash]，'click'）; 
} 
 
} 
  

解决方案

  / * Google地图* / 
函数googleMap（）{
 var locations = [
 ['Bondi Beach'，-33.890542，151.274856， 4]，
 ['Coogee Beach'，-33.923036,151.259052,5]，
 ['Cronulla Beach'，-34.028249,151.157507,3]，
 ['Manly Beach'， - 33.80010128657071,151.28747820854187,2]，
 ['Maroubra Beach'，-33.950198,151.259302,1] 
]; 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：10，
 center：new google.maps.LatLng（-33.92，151.25） ，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 var infowindow = new google.maps.InfoWindow（）; 
 var marker，i; 
 var markers = []; 
 for（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（locations [i ] [1]，地点[i] [2]），
 map：map 
}）; 
 markers.push（marker）; 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 map.panTo（marker.getPosition（））; 
 infowindow.setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
}; 
}）（marker，i））; 
} 
 
 if（urlhash）{
 google.maps.event.trigger（markers [urlhash]，'click'）; 
} 
 
} 
  

I currently have a Google Map with multiple markers, I'm trying to use the URL to trigger the required marker to display it's info window.

E.G if the URL was '/index.html#1' the first marker would open its info window and if '/index.html#2' the second marker would open its info window.

I was advised to use google.maps.event.trigger(markers[urlhash], 'click'); but this doesn't seem to trigger the info window?

Any and all advice would be appreciated, thank you.

Get URL (/index.html#1):

var urlhash = window.location.hash.replace('#','');

Google Map:

/* Google Map */
function googleMap(){
  var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.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() {
        map.panTo(marker.getPosition());
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      };
    })(marker, i));
  }

  if(urlhash){
    google.maps.event.trigger(markers[urlhash], 'click');
  }

}

解决方案

/* Google Map */
function googleMap(){
  var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var markers = [];
  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
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        map.panTo(marker.getPosition());
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      };
    })(marker, i));
  }

  if(urlhash){
    google.maps.event.trigger(markers[urlhash], 'click');
  }

}

这篇关于使用网址哈希触发Google地图信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！