使用网址哈希触发Google地图信息窗口

使用网址哈希触发Google地图信息窗口

本文介绍了使用网址哈希触发Google地图信息窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前有一个带有多个标记的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地图信息窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 07:16