谷歌地图事件监听器 jQuery

Question

好的，这就是我现在正在做的事情：

加载页面时，我执行 Ajax 请求以获取带有位置信息的 json 对象。

使用这些信息，我将谷歌地图初始化为一组标记。这是代码：

    $(document).ready(function()  {

//--- Ajax Request ------------------------------------------------------------------------------------------------------------------------
            $.ajax({
                dataType: "json",
                url: "karte-e.php",
                success: function(msg) {
                    initialize(msg);
                }
            });
//--- Ende Ajax Request ------------------------------------------------------------------------------------------------------------------------                

//--- Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------   
            function initialize(json) {
                var mapProp = {
                    center:new google.maps.LatLng(51.508742,-0.120850),
                    zoom:2,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                setMarkers(map, json);


            }

            function setMarkers(map, locations) {

                    var image_normal = {
                        url: 'Pins/pin-blau.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var image_neu = {
                        url: 'Pins/pin-rot.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var shape = {
                        type: 'rect',
                        coords: [5, 1, 27, 32]
                    };


                    for (var i = 0; i < locations.Standorte.length -1; i++) {

                        var myLatLng = new google.maps.LatLng(locations.Standorte[i].lat, locations.Standorte[i].lng);
                        var marker_normal = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_normal,
                            shape: shape,
                            title: locations.Standorte[i].Titel,
                            zIndex: i
                        });
                    }

                    var myLatLng = new google.maps.LatLng(locations.Standorte[locations.Standorte.length - 1].lat, locations.Standorte[locations.Standorte.length - 1].lng);
                    var marker_neu = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_neu,
                            shape: shape,
                            title: locations.Standorte[locations.Standorte.length - 1].Titel,
                            zIndex: locations.Standorte.length - 1
                        });


                }
//--- Ende Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------                      

            return false;
//--- Ende $(document).ready() ------------------------------------------------------------------------------------------------------------------------ 
});

我想做的是创建一个事件侦听器，它由鼠标单击标记触发。我的问题是，我对 jQuery 很陌生，我不知道在哪里放置我的 google.maps.event.addListener(marker, 'click', function(){}。我所有的尝试都失败了。希望，你可以帮帮我。

Answer 1

你需要做这样的事情：

google.maps.event.addListener(marker, 'click', function() {
    alert("Hello World");
});

其中marker 是对您创建的标记的引用（google.maps.Marker 类型）。

因此，您可以随时执行此操作，但您需要一个有效的 google.maps.Marker 对象，理想情况下您希望在创建标记后立即执行此操作。

因此，将您的代码更新为以下内容应该可以：

    $(document).ready(function()  {

//--- Ajax Request ------------------------------------------------------------------------------------------------------------------------
            $.ajax({
                dataType: "json",
                url: "karte-e.php",
                success: function(msg) {
                    initialize(msg);
                }
            });
//--- Ende Ajax Request ------------------------------------------------------------------------------------------------------------------------                

//--- Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------   
            function initialize(json) {
                var mapProp = {
                    center:new google.maps.LatLng(51.508742,-0.120850),
                    zoom:2,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                setMarkers(map, json);


            }

            function setMarkers(map, locations) {

                    var image_normal = {
                        url: 'Pins/pin-blau.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var image_neu = {
                        url: 'Pins/pin-rot.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var shape = {
                        type: 'rect',
                        coords: [5, 1, 27, 32]
                    };


                    for (var i = 0; i < locations.Standorte.length -1; i++) {

                        var myLatLng = new google.maps.LatLng(locations.Standorte[i].lat, locations.Standorte[i].lng);
                        var marker_normal = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_normal,
                            shape: shape,
                            title: locations.Standorte[i].Titel,
                            zIndex: i
                        });
                        (function(marker){
                            google.maps.event.addListener(marker, 'click', function(){
                                // you can use the variable marker here to access the marker.
                            }); 
                        })(marker_normal);
                    }

                    var myLatLng = new google.maps.LatLng(locations.Standorte[locations.Standorte.length - 1].lat, locations.Standorte[locations.Standorte.length - 1].lng);
                    var marker_neu = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_neu,
                            shape: shape,
                            title: locations.Standorte[locations.Standorte.length - 1].Titel,
                            zIndex: locations.Standorte.length - 1
                        });
                        (function(marker){
                            google.maps.event.addListener(marker, 'click', function(){
                                // you can use the variable marker here to access the marker.
                            }); 
                        })(marker_neu);


                }
//--- Ende Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------                      

            return false;
//--- Ende $(document).ready() ------------------------------------------------------------------------------------------------------------------------ 
});