Javascript 谷歌地图事件监听器jQuery

好的，下面是我目前正在做的：

加载页面时，我会执行一个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() ------------------------------------------------------------------------------------------------------------------------ 
});

$（文档）.ready（函数（）{
//---Ajax请求------------------------------------------------------------------------------------------------------------------------
$.ajax({
数据类型：“json”，
url:“karte-e.php”，
成功：功能（msg）{
初始化（msg）；
}
});
//---Ende Ajax请求---------------------------------------------------------------------------------------------------------------------
//---Funktionen谷歌地图API---------------------------------------------------------------------------------------------
函数初始化（json）{
var mapProp={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
setMarkers（map，json）；
}
功能设置标记（地图、位置）{
var图像_正常={
url:'Pins/pin blau.png'，
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,32）
};
变量图像_neu={
url:'Pins/pin-rot.png'，
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,32）
};
变量形状={
键入：“rect”，
coords:[5,1,27,32]
};
对于（变量i=0；i

---

我想做的是创建一个事件监听器，它由鼠标点击标记触发。我的问题是，我对jQuery非常陌生，我不知道把我的google.maps.event.addListener（标记，'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() ------------------------------------------------------------------------------------------------------------------------ 
});

$（文档）.ready（函数（）{
//---Ajax请求------------------------------------------------------------------------------------------------------------------------
$.ajax({
数据类型：“json”，
url:“karte-e.php”，
成功：功能（msg）{
初始化（msg）；
}
});
//---Ende Ajax请求---------------------------------------------------------------------------------------------------------------------
//---Funktionen谷歌地图API---------------------------------------------------------------------------------------------
函数初始化（json）{
var mapProp={
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
setMarkers（map，json）；
}
功能设置标记（地图、位置）{
var图像_正常={
url:'Pins/pin blau.png'，
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,32）
};
变量图像_neu={
url:'Pins/pin-rot.png'，
尺寸：新google.m