Question

我无法弄清楚我在这段代码中做错了什么。我的目标是能够点击或鼠标悬停在'＆lt; p>'元素并有一个相应的标记来显示其信息窗口，就像我点击了窗口本身一样。

这是我的代码：

<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，我通过鼠标悬停调用一个函数。正确调用此函数（现在注释掉的警报正在运行）但是没有发生任何事情。有谁看到我哪里出错了？

Answer 1

您的click_sidebar函数无法访问您在markers函数中定义的get_locations对象。

您使用的是Firebug还是其他调试器？使用调试器逐步执行代码将帮助您更轻松地发现这些类型的错误。

修改如果你开始使用适当的对象并坚持更加面向对象的风格，那将是一件好事。但是，在解决您迫在眉睫的问题的同时，将markers的声明移到全局范围（例如，customIcons以下）

谷歌地图V3触发事件在地图之外

1 个答案: