Google Maps API v3：单击未在Firefox中触发自定义标记的事件 [英] Google Maps API v3 : Click events not triggered in firefox for custom marker
问题描述
已经创建了一个地图，我尝试使用类似于我的地图的功能。根据这些ddl中的选择，我在右侧有两个下拉列表，您可以添加自定义标记/图标。您选择一种标记类型，然后单击地图右上角的+按钮，然后单击添加标记的位置。我的问题是，这在IE，Safari和Chrome中运行正常，但不是在Firefox中。点击事件似乎没有触发。
以下是地图的位置： https://ait.saultcollege.ca/Michael.Armstrong/Index.html
按钮在右上角添加标记具有指向我的'placeMarker（）'函数的onclick事件。这里是placeMarker（），createMarker（）...的代码。
$ b函数placeMarker（）{
选择（ placeMarker）;
var infowindow = new google.maps.InfoWindow（{}）;
var catID = document.getElementById（'category'）;
var typeID = document.getElementById（'ddlType'）;
var category = catID.options [catID.selectedIndex] .value;
var markerType = typeID.options [typeID.selectedIndex] .value;
if（！markerType）{
alert（您必须选择一个图标类型。）;
else {
var moveListener = google.maps.event.addListener（customMap，'mousemove'，function（event）{
if（mapMarker）{
mapMarker.setPosition（event.latLng）;
} else {
mapMarker = createMarker（event.latLng，test，markerType，test）;
}
}） ;
$ b var clickListener = google.maps.event.addListener（customMap，'click'，function（event）{
if（mapMarker）{
select（hand_b）;
google.maps.event.clearListeners（customMap，'mousemove'）;
google.maps.event.removeListener（listener）;
mapMarker = createMarker（event.latLng，test2， markerType，test）;
var htmlInfo =+
Category：+ category ++
Item：+ markerType ++
注：+
位置：+ mapMarker.getPosition（）。toString（）++
+
;
//infowindow.setContent(htmlInfo）;
//infowindow.open(customMap，mapMarker）;
}
}）;
函数createMarker（latlng，title，icon，html）{
var mapMarker = new google.maps.Marker（{
position ：latlng，
map：customMap，
title：title，
icon：'图片/'+图标+'.png'
}）;
返回mapMarker;
function select（buttonId）{
document.getElementById（hand_b）。className =unselected;
document.getElementById（placeMarker）。className =unselected;
document.getElementById（buttonId）.className =selected;
}
任何帮助或建议都会很棒。这可能是ff中的一个错误吗？
我为开源灾难软件包做了非常类似的事情。在这种情况下，我们假设我在下拉菜单中选择了Fire，并触发addFire（）。标记上的侦听器将删除点击点或允许您拖动它。该地图一次只能有一个侦听器，但每个标记仍可以同时拥有自己的侦听器。
以下是Chrome，Firefox和IE8：
//这个函数设置了添加一个火图标的地图
function addFire（）{
//杀死老监听器
if（listening）
google.maps.event.removeListener（listenerhandle）;
//启动新侦听器
listenerhandle = google.maps.event.addListener（disasterMap，'click'，addFirePoint）;
listening = true;
} // end addFire
//此函数为地图添加新的着火点并控制拖动并单击
函数addFirePoint（event）{
// Create标记
var fireMarker = new google.maps.Marker（{
icon：./mapimgs/fire.png，position：event.latLng，map：disasterMap，draggable：true}）;
newFireMarkers.push（fireMarker）;
fireMarker.setTitle（Fire）;
//监听新标记点击
google.maps.event.addListener（fireMarker，'click'，function（）{
fireMarker.setMap（null）;
//从数组
中删除标记（i = 0; i
have created a map that I'm trying to have function similar to 'My Maps'. I have two dropdownlists on the right side, based on the selection in those ddl's, you can add a custom marker / icon. You select a marker type, then click the '+' button in the top right corner of the map, and then click where you want the marker added. My issue is, this works fine in IE, Safari, and Chrome, but not in firefox. The click event doesn't seem to fire.
Here is the location of the map : https://ait.saultcollege.ca/Michael.Armstrong/Index.html
The button to add the marker in the top right has an onclick event pointing to my 'placeMarker()' function. Here is the code for placeMarker(), createMarker() ...
function placeMarker() {
select("placeMarker");
var infowindow = new google.maps.InfoWindow({});
var catID = document.getElementById('category');
var typeID = document.getElementById('ddlType');
var category = catID.options[catID.selectedIndex].value;
var markerType = typeID.options[typeID.selectedIndex].value;
if (!markerType) {
alert("You must select an icon type.");
}
else {
var moveListener = google.maps.event.addListener(customMap, 'mousemove', function(event) {
if (mapMarker) {
mapMarker.setPosition(event.latLng);
} else {
mapMarker = createMarker(event.latLng, "test", markerType, "test");
}
});
var clickListener = google.maps.event.addListener(customMap, 'click', function(event) {
if (mapMarker) {
select("hand_b");
google.maps.event.clearListeners(customMap, 'mousemove');
google.maps.event.removeListener(listener);
mapMarker = createMarker(event.latLng, "test2", markerType, "test");
var htmlInfo = "" +
"Category:" + category + "" +
"Item:" + markerType + "" +
"Notes:" +
"Location:" + mapMarker.getPosition().toString() + "" +
"" +
"";
//infowindow.setContent(htmlInfo);
//infowindow.open(customMap, mapMarker);
}
});
}
}
function createMarker(latlng, title, icon, html) {
var mapMarker = new google.maps.Marker({
position: latlng,
map: customMap,
title: title,
icon: 'Images/' + icon + '.png'
});
return mapMarker;
}
function select(buttonId) {
document.getElementById("hand_b").className = "unselected";
document.getElementById("placeMarker").className = "unselected";
document.getElementById(buttonId).className = "selected";
}
Any help or suggestions would be awesome. Could this perhaps be a bug in ff?
I did something very similar for an open-source disaster software package. In this case, lets assume I selected "Fire" in my dropdown menu and this triggers addFire(). The listener on the markers will delete the point on a click or allow you to drag it. The map can only have one listener at a time, but each marker can still have its own listener at the same time.
Here is the code that worked on Chrome, Firefox and IE8:
//This function sets up the map for adding a fire icon
function addFire() {
//Kill old listener
if(listening)
google.maps.event.removeListener(listenerhandle);
//Start new listener
listenerhandle = google.maps.event.addListener(disasterMap, 'click', addFirePoint);
listening = true;
}//end addFire
//This function adds new fire points to the map and controls dragging and clicking
function addFirePoint(event) {
//Create the marker
var fireMarker = new google.maps.Marker({
icon: "./mapimgs/fire.png", position: event.latLng, map: disasterMap, draggable: true });
newFireMarkers.push(fireMarker);
fireMarker.setTitle("Fire");
//Listen for clicks on the new marker
google.maps.event.addListener(fireMarker, 'click', function() {
fireMarker.setMap(null);
//remove the marker from the array
for(i=0;i
这篇关于Google Maps API v3：单击未在Firefox中触发自定义标记的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
