无法在地图上打开Infowindow Pan

问题描述：

我正在使用下面的代码将HTML列表链接到地图上的标记。当我点击标记时，InfoWindow可以毫无问题地打开。但是，当我点击列表项时，尽管地图正确摆放并居中于适当的标记，但我无法同时打开InfoWindow。无法在地图上打开Infowindow Pan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Map My Finds - All Locations</title> 
     <link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
    <style> 
    div#locationslist div{  
    cursor:pointer; } 
    </style>  

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

     <body onload="showLocations()"> 

      <script type="text/javascript"> 

       var map; 
       var gmarkers = new Array(); 
       var locationslist; 

       function showLocations() { 
       map = new google.maps.Map(document.getElementById("map"), { 
       center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
       zoom:6, 
       mapTypeId: 'terrain' 
       }); 
       var infoWindow = new google.maps.InfoWindow; 

       // Change this depending on the name of your PHP file 
       downloadUrl("loadmylocations.php", function(data) { 
       var xml = data.responseXML; 
       gmarkers = xml.documentElement.getElementsByTagName("marker"); 
       var bounds = new google.maps.LatLngBounds(); 
       for (var i = 0; i < gmarkers.length; i++) { 
       var locationname = gmarkers[i].getAttribute("locationname"); 
       var address = gmarkers[i].getAttribute("address"); 
       var locationid = gmarkers[i].getAttribute("locationid"); 
       var point = new google.maps.LatLng( 
       parseFloat(gmarkers[i].getAttribute("osgb36lat")), 
       parseFloat(gmarkers[i].getAttribute("osgb36lon"))); 
       var html = "<b>" + locationname + "</b> <br/>" + address; 
       bounds.extend(point); 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       locationid: locationid 
       }); 
       bindInfoWindow(marker, map, infoWindow, html); 
       locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
       }   
       map.setCenter(bounds.getCenter()); 
       map.fitBounds(bounds); 
       //display company data in html 
       document.getElementById("locationslist").innerHTML = locationslist; 
       }); 
       } 

       function scrollToMarker(index) { 
       var point = new google.maps.LatLng( 
       parseFloat(gmarkers[index].getAttribute("osgb36lat")), 
       parseFloat(gmarkers[index].getAttribute("osgb36lon")) 
       ); 
       map.panTo(point); 
       } 

       function bindInfoWindow(marker, map, infoWindow, html) { 
       google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(map, marker); 
       }); 
       } 

       function downloadUrl(url, callback) { 
       var request = window.ActiveXObject ? 
       new ActiveXObject('Microsoft.XMLHTTP') : 
       new XMLHttpRequest; 

       request.onreadystatechange = function() { 
       if (request.readyState == 4) { 
       request.onreadystatechange = doNothing; 
       callback(request, request.status); 
       } 
       }; 

       request.open('GET', url, true); 
       request.send(null); 
       } 
       function doNothing(){ 
       } 

       </script> 
       </head>  
       </body> 
       </html>

更新的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Map My Finds - All Locations</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
<style> 
    div#locationslist div{cursor:pointer; } 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map { height: 70%; width:70% } 
</style>  

<script type="text/javascript"> 
var map; 
var gmarkers = []; 
var locationslist = ""; 
var arrMarkers = []; // add our markers to this array 

function showLocations() { 
    map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
     zoom:6, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    var infoWindow = new google.maps.InfoWindow; 
     downloadUrl("loadmylocations.php", function(data) { 
       var xml = data.responseXML; 
       gmarkers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < gmarkers.length; i++) { 
     var locationname = gmarkers[i]["locationname"]; 
     var address = gmarkers[i]["address"]; 
     //var locationid = gmarkers[i]["locationid"]; 
     var point = new google.maps.LatLng( 
      parseFloat(gmarkers[i]["osgb36lat"]), 
      parseFloat(gmarkers[i]["osgb36lon"])); 
     var html = "<b>" + locationname + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point 
     }); 

     arrMarkers.push(marker); 

     bindInfoWindow(marker, map, infoWindow, html); 
     locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
    } 
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
    //display company data in html 
    document.getElementById("locationslist").innerHTML = locationslist; 
}); 
       } 

function scrollToMarker(index) { 
    var point = new google.maps.LatLng( 
     parseFloat(gmarkers[index]["osgb36lat"]), 
     parseFloat(gmarkers[index]["osgb36lon"]) 
    ); 

    map.panTo(point); 

    google.maps.event.trigger(arrMarkers[index], 'click'); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
    }); 
} 
</script> 
</head> 
<body onload="showLocations()"> 
    <div id="map"></div> 
    <div id="locationslist"></div> 
</body> 
</html>

答

你已经绑定上的标记的点击事件，打开信息窗口。你想要做的就是触发点击，就好像用户自己做了一样。

事情是这样的：

google.maps.event.trigger(marker, 'click');

困难的部分将是您识别标记的点击事件开火。建议你有一个所有标记的数组。在您调用scrollToMarker的同时，还要执行此触发器，并通过索引参数来确定阵列中哪个标记要“点击”。

更新：好的，下面是一个工作示例我的意思是。我已经删除了您的Ajax请求部分并添加了一些虚拟标记数据，但它应该足够简单，以便您了解如何集成到您的代码中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Map My Finds - All Locations</title> 
<link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
<style> 
    div#locationslist div{cursor:pointer; } 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map { height: 70%; width:70% } 
</style>  

<script type="text/javascript"> 
var map; 
var gmarkers = []; 
var locationslist = ""; 
var arrMarkers = []; // add our markers to this array 

function showLocations() { 
    map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
     zoom:6, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    gmarkers = [ 
     {locationname: "One", address: "blah", osgb36lat: "51.482238", osgb36lon: "0.001581"}, 
     {locationname: "Two", address: "blahblah", osgb36lat: "51.473364", osgb36lon: "0.011966"}, 
     {locationname: "Three", address: "blahblahblah", osgb36lat: "51.471974", osgb36lon: "-0.000651"}, 
     {locationname: "Four", address: "blahblahblahblah", osgb36lat: "51.472108", osgb36lon: "-0.002196"}, 
     {locationname: "Five", address: "foobar", osgb36lat: "51.474995", osgb36lon: "-0.003827"}, 
    ]; 

    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < gmarkers.length; i++) { 
     var locationname = gmarkers[i]["locationname"]; 
     var address = gmarkers[i]["address"]; 
     //var locationid = gmarkers[i]["locationid"]; 
     var point = new google.maps.LatLng( 
      parseFloat(gmarkers[i]["osgb36lat"]), 
      parseFloat(gmarkers[i]["osgb36lon"]) 
     ); 
     var html = "<b>" + locationname + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point 
     }); 

     arrMarkers.push(marker); 

     bindInfoWindow(marker, map, infoWindow, html); 
     locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
    } 
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
    //display company data in html 
    document.getElementById("locationslist").innerHTML = locationslist; 
} 

function scrollToMarker(index) { 
    var point = new google.maps.LatLng( 
     parseFloat(gmarkers[index]["osgb36lat"]), 
     parseFloat(gmarkers[index]["osgb36lon"]) 
    ); 

    map.panTo(point); 

    google.maps.event.trigger(arrMarkers[index], 'click'); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
    }); 
} 
</script> 
</head> 
<body onload="showLocations()"> 
    <div id="map"></div> 
    <div id="locationslist"></div> 
</body> 
</html>

嗨，非常感谢您的帮助。原谅我，当谈到这一点时，我有点新手，但是我应该采取这个正确的方向？ map.panTo（point）; 函数bindInfoWindow（marker，map，infoWindow，html）google.maps.event.addListener（gmarkers，'click'，function（）{ infoWindow.setContent（html）; infoWindow.open（map，gmarkers）; }）; } } 亲切的问候。 Chris – IRHM

不完全;我会看看我是否可以稍后发布一个工作示例 – duncan

嗨Duncan，对代码的诚挚感谢。我在这里非常密集，但我无法得到它的工作。我试图包括链接我的PHP文件，但得到以下错误对象预计行28字符7指向此行： downloadUrl（“loadmylocations.php”，函数（数据）{ 我已更新我的原始文章显示我修改code.I只是想知道你是否可能请看看这个，让我知道我要去哪里错了，我想这可能是因为我试图为每个不在那里的标记获取属性，但我可以好的问候Chris – IRHM

无法在地图上打开Infowindow Pan

相关推荐