首页 文章

Google Maps API v3:点击firefox中未触发的自定义标记事件

提问于
浏览
10

我创建了一个 Map ,我试图具有类似于“我的 Map ”的功能 . 我在右侧有两个下拉列表,根据这些ddl中的选择,您可以添加自定义标记/图标 . 选择标记类型,然后单击 Map 右上角的“”按钮,然后单击要添加标记的位置 . 我的问题是,这在IE,Safari和Chrome中运行良好,但在Firefox中不行 . 点击事件似乎没有触发 .

这是 Map 的位置:https://ait.saultcollege.ca/Michael.Armstrong/Index.html

在右上角添加标记的按钮有一个指向我的'placeMarker()'函数的onclick事件 . 这是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中的一个错误吗?

1 回答

  • 1

    我为开源灾难软件包做了类似的事情 . 在这种情况下,我们假设我在下拉菜单中选择了“Fire”,这会触发addFire() . 标记上的侦听器将删除单击上的点或允许您拖动它 . Map 一次只能有一个侦听器,但每个标记仍然可以同时拥有自己的侦听器 .

    以下是适用于Chrome,Firefox和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
    

相关问题