谷歌地图事件侦听器 jQuery
Google Maps Event Listener 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() ------------------------------------------------------------------------------------------------------------------------
});
我想做的是创建一个事件侦听器,它由鼠标单击标记触发。我的问题是,我对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() ------------------------------------------------------------------------------------------------------------------------
});
相关文章:
- jQuery将侦听器的大小调整为只触发宽度的变化
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- jQuery事件侦听器多次启动
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
- 延迟JQuery点击侦听器
- jQuery 事件侦听器
- 整合jQuery侦听器
- jQuery侦听器以获取服务器更新
- 画布子级上的 JQuery 侦听器不起作用
- 通过 jquery 侦听器将 html 表单链接到 javascript 函数时遇到问题
- 值更改 jQuery 侦听器
- Jquery 侦听器在隐身模式镶边中间歇性地工作
- 如何将 jQuery 侦听器添加到 CakePHP 时间输入中
- 用于单击类的 Jquery 侦听器,但在单击其中的图标时不起作用
- Jquery侦听器,用于更改元素id
- 使用append()移动对象后,jQuery侦听器目标似乎中断了
- jQuery侦听器排除子项
- 将jQuery侦听器应用于元素'的孩子