谷歌地图标记事件
Google Maps Marker Events
我有下面的谷歌地图代码。此代码的目的是显示一个带有标记在中间的地图。标记是可拖动的,当它被丢弃时,我需要它来给出标记被丢弃的当前Lat/Long。该活动并不总是启动。在chrome中,如果我只是让代码运行,它就不起作用。但是,如果我通过调试并停止附加事件的代码来减慢速度,然后让它继续,它就可以工作了。似乎某个地方有比赛条件,但我不知道在哪里。有人能看看你有没有什么想法吗。
function initialize() {
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("MapCanvas");
var map = new google.maps.Map(canvas, myOptions);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
marker = new google.maps.Marker({
position: initialLocation,
draggable: true,
map: map,
title: "You are here"
});
}, function () {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.latitude, position.longitude);
map.setCenter(initialLocation);
marker = new google.maps.Marker({
position: initialLocation,
draggable: true,
map: map,
title: "You are here"
});
}, function () {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
google.maps.event.addListener(marker, 'dragend', function () {
$("#txtLat").val(marker.position.Ia);
$("#txtLong").val(marker.position.Ja);
});
}
我还没有测试过这一点,但看起来marker
是在一个getCurrentPosition
函数中初始化的。我猜这两个函数都是异步的,这就是它们采用回调函数的原因。但是,您正试图将侦听器函数同步附加到marker
,因此在正常情况下,您可能会尝试在初始化marker
之前将侦听器附加到marker
。(此外,我没有看到marker
的var
语句,所以除非您忽略了这一点,否则marker
在全局命名空间中——可能不是您想要的)。
解决此问题的方法是在初始化marker
之后,在回调函数中附加侦听器。由于W3C Geolocation API和Gears API的回调看起来是相同的,因此您可能需要将所有内容放在一个函数中:
function initialize() {
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(canvas, myOptions);
var marker;
// set up callback
function initMap(initialLocation) {
map.setCenter(initialLocation);
// init marker
marker = new google.maps.Marker({
position: initialLocation,
draggable: true,
map: map,
title: "You are here"
});
// now attach the event
google.maps.event.addListener(marker, 'dragend', function () {
// you know you'd be better off with
// marker.getPosition().lat(), right?
$("#txtLat").val(marker.position.Ia);
$("#txtLong").val(marker.position.Ja);
});
}
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
// call the callback
initMap(new google.maps.LatLng(
position.coords.latitude, position.coords.longitude
));
}, function () {
// I just assumed you weren't using
// browserSupportFlag anywhere else
handleNoGeolocation(true);
});
// Try Google Gears Geolocation
} else if (google.gears) {
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function (position) {
initMap(new google.maps.LatLng(
position.latitude, position.longitude
));
}, function () {
handleNoGeoLocation(true);
});
// Browser doesn't support Geolocation
} else {
handleNoGeolocation(false);
}
}
相关文章:
- 单击标记时更改标记图标(在单击事件上),并在单击另一个标记时将其恢复为普通图标
- 完整日历 - 在事件上拖放图标
- IE 输入清除图标有时不会触发更改事件
- jQuery显示带有切换事件的图标
- 无法在更改事件中获得不同的图标
- 在 jquery 移动版中分别分隔可折叠文本和图标的事件
- 引导日期时间选择器 - 覆盖单击日历图标事件
- Javascript - 在加载页面内容时将图标/图像放在页面上,并在某些JS事件中使用它
- 字体真棒图标,带有点击事件集
- 流星事件的目标是在带有内部图标的链接上表现奇怪
- 手风琴图标正在更改,当手风琴内部有一些点击事件:引导 2.3 版本
- 谷歌日历-事件旁边的小图标
- 单击按钮上的图标字体图标(有时是文本)时,Backbone.js事件未触发
- Fullcalendar将图标添加到事件而不触发事件单击
- JS:带有图标的按钮的事件目标
- 单击按钮后,在单击事件进行时,在按钮上显示微调器图标
- 使用keyup事件使jquery图标可见
- 链接上的浮动图标不接收鼠标单击事件
- Chrome扩展触发点击事件上的图标按下
- 在单选按钮更改事件上动态更改字体Awesome图标