0

如何在单击标记时(在单击事件上)更改标记图标,并在单击另一个标记时将其恢复为正常图标?

这是我的代码。在这段代码中,我为 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.....
4

1 回答 1

0

我不知道您如何标记和取消标记它们。为什么不只是 for 循环并取消标记所有这些,然后只标记已单击的一个?

尝试使用 jquery 像这样
http://jsfiddle.net/jtjgY/
或简单的循环像这样
http://jsfiddle.net/3M5CS/1/

于 2012-08-17T08:08:58.790 回答