无法在Map Pan上打开Infowindow

时间：2011-09-19 15:49:43

标签： javascript html google-maps-api-3

我正在使用下面的代码将HTML列表链接到地图上的标记。当我单击标记时，InfoWindow打开没有任何问题。但是，当我单击列表项时，虽然地图正确平移并且以适当的标记为中心，但我无法同时打开InfoWindow。

<!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>

1 个答案:

答案 0 :(得分：0)

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

这样的事情：

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

困难的部分将是您确定点击事件正在触发的标记。建议您拥有所有标记的数组。在调用scrollToMarker的同时，也执行此触发器，并通过index参数，以识别阵列中您想要“点击”的哪个标记

更新：好的，这是我的意思的一个有效例子。我删除了你的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>
相关问题
最新问题