Невозможно открыть Infowindow на карте Пан - PullRequest
Новая
       1

Невозможно открыть Infowindow на карте Пан

0 голосов
/ 19 сентября 2011

Я использую код ниже, чтобы связать список 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 голосов
/ 19 сентября 2011

Вы связали событие щелчка на маркере, чтобы открыть информационное окно.То, что вы хотите сделать, это активировать этот клик, то есть, как если бы пользователь сделал это сам.

Примерно так: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...