Google Maps API v3 : 맞춤 마커

Question

에 대해 firefox에서 트리거되지 않은 클릭 이벤트가 '내지도'와 유사한 기능을 갖게하려는지도를 만들었습니다. 오른쪽에 두 개의 드롭 다운리스트가 있는데, 그 ddl의 선택에 따라 맞춤 마커/아이콘을 추가 할 수 있습니다. 마커 유형을 선택한 다음지도의 오른쪽 상단에있는 '+'버튼을 클릭 한 다음 마커를 추가 할 위치를 클릭하십시오. 내 문제는 IE, Safari 및 Chrome에서는 정상적으로 작동하지만 Firefox에서는 작동하지 않습니다. 클릭 이벤트가 발생하지 않는 것 같습니다. 여기

지도의 위치입니다 : https://ait.saultcollege.ca/Michael.Armstrong/Index.html

버튼은 오른쪽 상단에있는 마커를 추가 내 '장소 표시()'기능을 가리키는 온 클릭 이벤트가 있습니다. 다음은 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"; 
} 

어떤 도움이나 제안이 돋보일 것입니다. 이것은 아마도 ff의 버그 일 수 있습니까?

Answer 1

나는 오픈 소스 재난 소프트웨어 패키지와 비슷한 것을 만들었습니다. 이 경우, 드롭 다운 메뉴에서 "Fire"를 선택했다고 가정하면 addFire()가 트리거됩니다. 마커에있는 수신기는 클릭 지점을 삭제하거나 드래그 할 수있게합니다. 지도에는 한 번에 하나의 수신기 만있을 수 있지만 각 마커는 동시에 자체 수신기를 가질 수 있습니다.

 
//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