Триггерное событие Google Maps V3 за пределами карты - PullRequest
Новая
       31

Триггерное событие Google Maps V3 за пределами карты

0 голосов
/ 16 декабря 2011

Я не могу понять, что я делаю неправильно в этом коде.Моя цель - иметь возможность щелкнуть или навести курсор мыши на элемент

и получить соответствующий маркер для отображения его информационного окна, как если бы я щелкнул по самому окну.

Это мой код: 

<style type="text/css" >

  html { height: 100% }

  body { height: 100%; margin: 0; padding: 0 }

</style>



<script type="text/javascript"

    src="http://maps.googleapis.com/maps/api/js?sensor=true">

</script>

<script type="text/javascript"> 

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



//Different icons if coupon or no coupon
var customIcons = {
      yes: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      no: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };


// Download XML from AJAX
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);
}


//AJAX: Send all locations within bounds of map
function get_locations(neLat, neLng, swLat, swLng, map, infoWindow)
{
    downloadUrl("Scripts/googlemap_ajax.php?neLat="+neLat+"&neLng="+neLng+"&swLat="+swLat+"&swLng="+swLng,      function(data) 
    {
        var side_html= '';
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) 
        {
                var name = markers[i].getAttribute("name");
                var tags = markers[i].getAttribute("tags");
                var coupon = markers[i].getAttribute("coupon");
                var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("latitude")),
                        parseFloat(markers[i].getAttribute("longitude")));
                var html = "<b>" + name + "</b> <br/>" + tags;      
                var icon = customIcons[coupon] || {};
                var marker = new google.maps.Marker(
            {
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
            });

            //TEST Side bar
            side_html += '<p onMouseOver="click_sidebar()">' + name + '</p>';


            bindInfoWindow(marker, map, infoWindow, html);
        }

        document.getElementById("locationSelect").innerHTML = side_html;
    });
}



function click_sidebar() 
{
    google.maps.event.trigger(markers[1], 'click');
    //alert("SOMETHING");
}


function doNothing() 
{
}


function initialize() //Initialize the map

{   
    var last_ne_lat;

    var latlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $long; ?>);

    var myOptions = {

        zoom: 16,

        center: latlng,
        streetViewControl: false,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var infoWindow = new google.maps.InfoWindow;


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var image = '/View/Images/map_icon.png';

    var beachMarker = new google.maps.Marker({

        position: latlng,

        map: map,

        icon: image,

        title:"YOU ARE HERE"

    });

    // Add listener to map
    google.maps.event.addListener(map, 'bounds_changed', function() {
        var bounds = this.getBounds();
        var ne = bounds.getNorthEast();
        var neLat = bounds.getNorthEast().lat();
        var neLng = bounds.getNorthEast().lng();
                var sw = bounds.getSouthWest();
        var swLat = bounds.getSouthWest().lat();
        var swLng = bounds.getSouthWest().lng();
        if( neLat != last_ne_lat)
        {
            get_locations(neLat, neLng, swLat, swLng, map, infoWindow);
            last_ne_lat = neLat;
        }
    });

}


</script>


<body onload="initialize()">
    <div id="locationSelect" style="width:100%"></div>

    <div id="map_canvas" style="width:70%; height:90%"></div>

</body>

В функции 'get_locations' я выводил html, где я вызываю функцию при наведении мыши.Эта функция вызывается правильно (предупреждение, которое теперь закомментировано, работало), однако ничего не происходит.Кто-нибудь видит, где я ошибся?

1 Ответ

1 голос
/ 16 декабря 2011

Ваша функция click_sidebar не имеет доступа к объекту markers, который вы определили в функции get_locations.

Вы используете Firebug или какой-либо другой отладчик? Выполнение кода с помощью отладчика поможет вам гораздо легче обнаруживать ошибки такого типа.

EDIT: Было бы хорошо, если бы вы начали использовать правильные объекты и придерживаться более объектно-ориентированного стиля. Но тем временем, чтобы решить вашу надвигающуюся проблему, переместите объявление markers в глобальную область (например, ниже customIcons)

...