如果我在Google地图中多次初始化标记,则会多次点击事件

时间:2013-07-09 06:28:48

标签: google-maps google-maps-api-3

我首先点击地图然后显示一个标记然后我点击标记地址是警报第一个fite,然后我再次点击地图上的任何地方然后我点击标记然后这次显示两次警报,如果我点击地图上第三次然后在标记点击上显示3次警报,依此类推, 为什么标记点击警报多次发生? 为什么click事件多次被触发? 请帮帮我?

     <!DOCTYPE html>
   <html>
       <head>
         <title>Accessing arguments in UI events</title>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
        <link      href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var infowindow;
     function initialize() {
      infowindow = new google.maps.InfoWindow(); 
          var mapOptions = {
zoom: 2 ,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
 };
       map = new google.maps.Map(document.getElementById('map-canvas'),
         mapOptions);
         markerForWhatsHere = new google.maps.Marker({
          // position: position,
             map: map
        });
        google.maps.event.addListener(map, 'click', function(e) {
          //   placeMarker(e.latLng, map);
         whatsHereEventLatLng=e.latLng;  
           whatsHere();
           });

                 }
        var markerForWhatsHere;
           var map ;
            function whatsHere(){
//alert("whats here latlng is "+ whatsHereEventLatLng);
if (markerForWhatsHere != undefined)   
{
 var addressForWhatsHere;
 var tmpName;
 markerForWhatsHere.setMap(null);
// google.maps.event.clearListeners(map, 'click');
 markerForWhatsHere.setPosition(null);
 markerForWhatsHere.setMap(map);
 markerForWhatsHere.setPosition(whatsHereEventLatLng);// updating marker positin for whats here
 var    image = "http://www.google.com/intl/en_ALL/mapfiles/marker_greenA.png";
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 latLng:whatsHereEventLatLng
                 }, function(responses,status) 
                 {
                    if (responses && responses.length > 0) 
                    {
                    addressForWhatsHere=responses[0].formatted_address;  //for address
                    //   alert("address is "+address);
                     for (i = 0; i < responses[0].address_components.length; ++i)//gettin city name where right click happen
                         {
                             for (j = 0; j < responses[0].address_components[i].types.length; ++j)
                             {
                             if (responses[0].address_components[i].types[j] == "locality") //for city
                                 {
                                  city = responses[0].address_components[i].long_name;  
                                 } 
                             }
                          } //end code for getting city
                    }
                    if(typeof(city)=='undefined')
                        city='Unknown';
                if(typeof(address)=='undefined')
                    address='Unknown';
                    infowindow.setContent("<b>Address : </b>"+addressForWhatsHere+" <br><b>City : </b>"+city+"<br><b> Lat.-lng. : </b>"+whatsHereEventLatLng);
                    infowindow.open(map, markerForWhatsHere);
                    markerForWhatsHere.setIcon(image);
                    var splitAddress=[];
                    splitAddress=address.split(",");
                    tmpName=splitAddress[0];
                    var markerTitle=image;


                });//end of geocoder


                google.maps.event.addListener(markerForWhatsHere, 'click', function (event) 
                        {
                    alert("addressForWhatsHere "+addressForWhatsHere);
                    if (event.alreadyCalled_) {
                       // alert('circle clicked again'); 
                    }
                    else {
                    var markerTitle=markerForWhatsHere.getIcon();
                        //  alert("marker title is "+markerTitle);

                            if(markerTitle.indexOf("green")!=-1)
                            {           //for marker selection
                                setMarkerTitle=markerTitle.replace("green","yellow");//changing color of marker
                                markerForWhatsHere.setIcon(setMarkerTitle);

                            }//end if marker is green                   //end of marker selection

                   if(markerTitle.indexOf("yellow")!=-1)
                            {//for marker unselection
                                                setMarkerTitle=markerTitle.replace("yellow","green");   //changing color of marker
         markerForWhatsHere.setIcon(setMarkerTitle);
          }//end if marker is yellow
                 event.alreadyCalled_ = true;        }
                     });//end of marker click           
}   
 infowindow.close();

             }

                google.maps.event.addDomListener(window, 'load', initialize);

              </script>
                 </head>
               <body>
                  <div id="map-canvas"></div>
                 </body>
               </html>

1 个答案:

答案 0 :(得分:0)

每次点击地图(在第一个之后),你移动标记:

if (markerForWhatsHere != undefined)   
{
  // ...
 markerForWhatsHere.setPosition(whatsHereEventLatLng);

但是添加一个新的“click”事件监听器:

google.maps.event.addListener(markerForWhatsHere, 'click', function (event) 
{
   alert("addressForWhatsHere "+addressForWhatsHere);
   if (event.alreadyCalled_) {
      // alert('circle clicked again'); 
   }
   else {
     var markerTitle=markerForWhatsHere.getIcon();
     if(markerTitle.indexOf("green")!=-1)
     { //for marker selection
       setMarkerTitle=markerTitle.replace("green","yellow");//changing color of marker
       markerForWhatsHere.setIcon(setMarkerTitle);
     }//end if marker is green                   //end of marker selection
     if(markerTitle.indexOf("yellow")!=-1)
     { //for marker unselection
       setMarkerTitle=markerTitle.replace("yellow","green");   //changing color of marker
       markerForWhatsHere.setIcon(setMarkerTitle);
     } //end if marker is yellow
     event.alreadyCalled_ = true;
  }
});//end of marker click           

如果标记最初未定义,则仅添加单击侦听器,或者删除标记并重新创建它。

working example