Question

我在事件监听器中遇到问题。我创建了＆＃39;点击＆＃39;事件监听器在“地图”中，每次用户点击地图时都会创建一个新标记。每个标记都有自己的信息框，其中包含删除标记的链接。

问题是，当我点击信息框内的删除链接时，始终会触发地图的点击事件。标记已成功删除，但它会创建一个新标记。我怎样才能解决这个问题？我只是想删除标记。

这里是代码：

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=123456778&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
    var map;
    var markers = [];
    var infowindows = [];
    var marker_cnt = 0;
    var marker_icons = { 'mall' : 'mall.png', 'train_station': 'train.png','park' : 'park.png', 'bank':'bank.png'};
    var infoWindow;

    var places = [
                    ['Central','mall',1.2892612468505713,103.84759068489075,'central mall'] ,
                    ['Dhoby Ghaut','train_station',1.298550049775337,103.84589552879333,'Dhoby Ghaut'] ,
                    ['Outram Station', 'train_station',1.2812595487889478,  103.83896470069885,'Outram Station'],
                    ['City Hall', 'bank',   1.2932084559435784, 103.85241866111755,'City Hall Station'],
                    ['Little India Station', 'train_station',   1.3071308997488136,     103.84971499443054,'Little India Station'],
                    ['Emily Park', 'park',  1.3071308997488136,     103.84971499443054,'Emily Park']                        
                ];

    var myOptions = {
         content: 'loading...'
        ,boxStyle: { 
          background: "#ccc"
          ,opacity: 1
          ,width: "280px"
          ,height: "100px"
          ,padding: "10px"
         }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,pane: "floatPane"
        ,enableEventPropagation: false 
    };

    var infowindow = new  InfoBox(myOptions);   
        google.maps.event.addListener(infowindow, 'click', function () {
            console.log('aaaa');
        }); 



    function initialize() 
    {
        var myLatlng = new google.maps.LatLng(1.2892826990902386,103.84409308433533);
        var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, 'click', function(event){
            placeMarker(event.latLng,event.getPosition);
        });

        loadMarkers();
    }

    function loadMarkers()
    {
        for(var i = 0 ; i < places.length; i++)
        {
            var spot = places[i];
            var spot_latlng = new google.maps.LatLng(spot[2],spot[3]) ;

            var marker = new google.maps.Marker({
                map:map,
                draggable:false,
                position: spot_latlng,
                title: spot[0],
                icon: marker_icons[spot[1]],
                html: '<h1>'+spot[4]+'</h1>  <a href="http://www.google.com" target="_blank"> website </a>'
            });

            markers.push(marker);

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            }); 
        }
    }

    function unloadMarkers()
    {
        for(var i = 0; i < markers.length; i++)
        {
            markers[i].setMap(null);
        }
    }

    function setMapCenter(index)
    {
        var spot = places[index];
        var spot_latlng = new google.maps.LatLng(spot[2],spot[3]);
        infowindow.setContent(markers[index].html = spot[4]);
        infowindow.open(map, markers[index]);
        map.setCenter(spot_latlng);
    }

    function placeMarker(location,position) 
    {

        marker = new google.maps.Marker({
            map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            position: location,
            html: '<a href="#" onclick="removeMarker('+ (markers.length) +')">delete marker</a> <br/> '+ location
         });

        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        }); 

        google.maps.event.addListener(marker,'dragend',function(){

            var html_content = '<a  href="#">delete marker </a> <br/>'+ this.position;
            this.html=html_content;
            infowindow.setContent(this.html);
            infowindow.open(map,this);
        });

        google.maps.event.addListener(marker,'dragstart',function(){
            infowindow.close(map,this);
        });
    }

    function removeMarker(index)
    {
        markers[index].setMap(null);
        infowindow.close(map, markers[index]);
        infowindows[index].close();
        return false;
    }

</script>

<style type="text/css">
    html{
        font:12px Arial, Helvetica, sans-serif;
        color:#333;
        padding:0;
        margin:0;
    }
    .listmenu{
        height:300px;

    }

    .listmenu ul {
        margin: 0 0 5px 0;
        padding: 0 0 2px 0;
        list-style-type: none;
        width:185px;
    }

    .listmenu li a {
        color: #333;
        display: block;

        height: 16px;
        padding: 4px 0 4px 14px;
        text-decoration: none;
        font-weight:bold;
        background-color:#fff;
    }

    .listmenu li a:hover {
        background-color: #666;
        color:#fff;
    }
    </style>

<body onload="initialize()">

<div id="map_canvas" style="width:1000px; height:300px; border: 3px solid #666"></div>

Answer 1

将click-event作为参数传递给removeMarker（）

    marker = new google.maps.Marker({
        map:map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        position: location,
        html: '<a href="#" onclick="removeMarker('+ (markers.length) +',event)">\
                delete marker</a> <br/> '+ location
     });

然后你就能够阻止事件的传播：

function removeMarker(index,event)
{   
    try{event.cancelBubble=true;}//IE
    catch(e){event.stopPropagation();}//others

    markers[index].setMap(null);
    infowindow.close(map, markers[index]);
    return false;
}

Answer 2

感谢您的回复。我已经解决了这个问题。我通过删除“onclick”并将javascript放到href <a href='javascript: removeMarker(index)'> remove </a>

来修复它

Google地图事件监听器

2 个答案: