Google 地图事件侦听器 jQuery
Google Maps Event Listener jQuery
好的,这是我目前正在做的事情:
加载页面时,我发出 Ajax 请求以获取具有位置信息的 json 对象。
根据这些信息,我初始化 google 地图和一组标记。这是代码:
$(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() ------------------------------------------------------------------------------------------------------------------------
});
好的,这是我目前正在做的事情:
加载页面时,我发出 Ajax 请求以获取具有位置信息的 json 对象。
根据这些信息,我初始化 google 地图和一组标记。这是代码:
$(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() ------------------------------------------------------------------------------------------------------------------------
});