谷歌地图事件侦听器 jQuery

Google Maps Event Listener jQuery

本文关键字:jQuery 侦听器 事件 谷歌地图      更新时间:2023-09-26

好的,这是我目前正在做的事情:

加载页面时,我执行 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(){}。我所有的尝试都失败了。希望,你能帮助我。

你需要做这样的事情:

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() ------------------------------------------------------------------------------------------------------------------------ 
});