單擊標記（單擊事件）時更改標記圖標，並在單擊另一標記時將其恢復爲正常圖標

如何在單擊標記（單擊事件時）時更改標記圖標和當另一個標記被點擊時將它返回到正常圖標？單擊標記（單擊事件）時更改標記圖標，並在單擊另一標記時將其恢復爲正常圖標

這是我的代碼。在這段代碼中，我爲ATM和商店位置創建了兩個圖標。

 <!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <title>OpenStreetMap with Google Maps v3 API</title> 
     <style type="text/css"> 
      html, body, #map { 
      position:absolute; 
      left:100px; 
       height: 400px; 
       margin: 0; 
       padding: 0; 
       width:400px; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="map"></div> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 

     var map;     // Variable for Map 
     var mapOption;    // Variable for Options for showing Map 


     var cromaStorePos = new Array(23);  // Array of coordinates of Croma Store. 
     var cromaStoreCat = new Array(3);     
     var cromaMarker = new Array(23);  // Array of Markers for Croma Store. 
     // List of Croma stores. Hard coded. These informations can be recieved from webservices. 

     cromaStoreAdd[0] = "Khanna Building, AA-5, 2nd Avenue, \nAnnanagar, Chennai-6000040.\nPhone: 044-6458 9703/04"; 
     cromaStorePos[0] = new google.maps.LatLng(13.072121,80.261307);   
     cromaStoreCat[0] = "ATM";  
     cromaStoreAdd[1] = "Ground Floor, KENCES Towers, No.1,\nRamakrishnan Street,\nNorth Usman Rd., Chennai-600017. \nPhone: +91 044 - 64629816"; 
     cromaStorePos[1] = new google.maps.LatLng(13.05473,80.235901); 
     cromaStoreCat[1] = "store"; 
     cromaStoreAdd[2] = "Tarapore Towers, 826 Ground Floor, \nAnna Salai, Chennai-600002. \nPhone: +91 044-6458 9715/16"; 
     cromaStorePos[2] = new google.maps.LatLng(13.094861, 80.215645); 
     cromaStoreCat[2] = "ATM"; 
      var element = document.getElementById("map"); 
      var myLatlng = new google.maps.LatLng(13.072121,80.261307); 
      /* 
      Build list of map types. 
      You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"] 
      but static lists sucks when google updates the default list of map types. 
      */ 



      var map = new google.maps.Map(element, { 
       center: myLatlng, 
       zoom: 12, 
       disableDefaultUI: true, 
       panControl: false, 
       zoomControl: false, 
       scaleControl: false, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       streetViewControl: false 
      }); 

      var cromaIcon = 'img/location_icon_atm_blue_blue.png'; 
      var cromaIcon1 = 'img/location_icon_bank_blue_blue.png'; 
      var cromaIcon2='img/pin_bank_Selected_blue.png'; 
      var cromaIcon3='img/pin_atm_selected_blue.png'; 


      // For loop for navigating through the croma stores coordinates and addresses. 
      for (i=0; i<3; i++) 
      { 
       if(cromaStoreCat[i]=="ATM") 
       { 
        cromaMarker[i] = new google.maps.Marker({ 

        position: cromaStorePos[i], 
        map: map, 
        title: cromaStoreAdd[i], 
        icon: cromaIcon, 

       }); 


       onclickMarker(cromaStoreCat[i],cromaMarker); 

       }  

       if(cromaStoreCat[i]=="store") 
       { 
        cromaMarker[i] = new google.maps.Marker({ 
        position: cromaStorePos[i], 
        map: map, 
        title: cromaStoreAdd[i], 
        icon: cromaIcon1 
        }); 

       onclickMarker(cromaStoreCat[i],cromaMarker); 

       } 


      } 


      function onclickMarker(category,marker){ 


      google.maps.event.addListener(cromaMarker[i],"click",function(){ 

       switch(category) 
       { 
       case 'ATM': 

        this.setIcon(cromaIcon3); 





        break; 
       case 'store': 
        this.setIcon(cromaIcon2); 


        break; 

       } 


      }); 







      } 





      //---------------- End of Code for getting address of a particular coordinates. <position> here. ------------------// 


      //---------------- Code for handling the error -------------------// 
      function showError(err) 
      { 
       if (err.code == 0) 
       { 
        divMap.innerHTML = "Unknown error.."; 
       } 
       else if (err.code == 1) 
       { 
        divMap.innerHTML = "User do not want to share its location."; 
       } 
       else if (err.code == 2) 
       { 
        divMap.innerHTML = "Sorry, But your position is not available."; 
       } 
       else if (err.code == 3) 
       { 
        divMap.innerHTML = "Sorry, But your request has timed out."; 
       } 
      } 
     </script> 
    </body> 
</html> 

Can anyone help me in this regard... 

Thanks in advance.....

來源

2012-08-17 Gopi

我不知道如何標記和取消標記。爲什麼你不只是爲了循環和全部取消標記，然後只標記一個被點擊的標記？

嘗試使用jQuery這樣
http://jsfiddle.net/jtjgY/
或簡單的循環，這樣
http://jsfiddle.net/3M5CS/1/

來源

2012-08-17 08:08:58 hsgu

你的建議真的幫了我，並正在努力..多謝.... – Gopi 2012-08-17 09:44:20

單擊標記（單擊事件）時更改標記圖標，並在單擊另一標記時將其恢復爲正常圖標

回答

相關問題