在添加新標記之前刪除先前的標記

Question

我正在嘗試開發基於位置的Web應用程序。在將新標記添加到Google地圖之前，我面臨着刪除以前標記的問題。 每當用戶單擊button時，地圖都會使用click事件添加標記。我想在發生click事件時刪除先前的標記並添加新的標記。 為了完成此任務，我還創建了一個功能，但是我無法找到應該將此功能稱為什么功能。 在這段代碼中，我使用mouseover事件來顯示與標記相關聯的信息窗口。 當用戶從指針移到最后一個標記時，我面臨着消失最后一個信息窗口的問題。 誰能幫助我解決這個問題。 這是我的代碼...

<script src="https://maps.googleapis.com/maps/api/js?key=v3"></script>
<script>
            var find1;
            var find2;
            var a, b, c, d;
            var map;
            var arr = [];
            var marker;
            var rstnearbybikaji = [
                [ 28.568884, 77.1868144, 'Aangan, Hyatt Regency Ring Road, Bhikaji Cama Place, R.K. Puram New Delhi, Delhi 110066', 4],
                [ 28.5677822, 77.1883104, 'South Indian Food Ansal Chamber-II 6, UG-9, Bhikaji Cama Place, R.K. Puram New Delhi, Delhi 110066', 5],
                [ 28.5677822, 77.1872972, 'Snack Bar , Ug 65 & 66, Somdutt Chamber II, 9 Bhikaji Cama Place New Delhi, Delhi 110066', 3],
                [ 28.568653, 77.1890415, 'Dominos ,Shop No. 30, 31 & 32, Ansal Chambers 1, Upper Ground Floor, Bhikaji Cama Place,R.K. PuramNew Delhi, Delhi 110066', 2],
                [ 28.5686276, 77.1855986, 'La Piazza ,Hyatt Regency Ring Road, Bhikaji Cama Place New Delhi, Delhi 110066', 1]
            ];
            var rstnearbynp =[ 
                [ 28.5481617 , 77.2518832 , ' The First Floor Restaurant and Bar ,104/58 ,Sahyog Nehru Place , New Delhi ,Delhi 110119' ,1],
                [ 28.5472051 , 77.2509509 , ' Dominos Pizza , Shop No. 2,3,4,5,6 and Rear Hall Spot No- G-34AB , Kalkaji New Delhi 110119' , 2],
                [ 28.5482088 , 77.2513012 , 'Sona Sweets & Udipi Restaurant , Shop No G-1 ,Sawaraswati Tower,27 , Nehru Place  New Delhi,Delhi 110048' ,3],
                [ 28.54802657 , 77.2515506 ,'How Abt Chicken Today , Building No 25 , Ground Floor Nahru Palce New Delhi , Delhi ,110019 ' ,4],
                [ 28.550442 , 77.25055 , 'Oh Calcutta  , Lala Lajpat Rai Road  Nahru Place New Delhi , Delhi 110019', 5] ,
                [ 28.549123 , 77.2514391 , 'Cafe Coffee Day,  Nehru Place Metro Station Nehru Place Metro Station, Nehru Place New Delhi, Delhi 110019 ' ,6 ],
                [ 28.550442 , 77.25055 ,'The Chatter House  ,F-15, S-2-3, Lower Ground Floor, Epicuria Mall Nehru Place New Delhi, Delhi 110019']
            ];

            var rstnearbycp = [ 
                [ 28.634072,77.218780 , 'Zen Restaurants  B-25, Connaught Place, Near Rajiv Chowk Metro Station Exit-2 Block B, Connaught Place New Delhi, Delhi 110001 ' , 1 ],
                [ 28.632716 ,77.221474, ' United Coffee House ,E15, Inner Circle, Near Adidas Showroom Block E, Connaught Place New Delhi, Delhi 110001 ',2] ,
                [ 28.631651 , 77.219899 ,'The Host, F- 8 Inner Circle Rajeev Chowk, Connaught Place New Delhi, Delhi 110001' , 3 ],
                [ 28.6315985 ,77.2186665 ,' Taste Of China ,N-18, Outer Circle, Opposite Kasturba Gandhi marg, Connaught Place Block N, Connaught Place New Delhi, Delhi 110001' ,4],
                [ 28.6289146 , 77.2152869 ,'Bhowani Junction , 37, Shaheed Bhagat Singh Marg, Connaught Place, Near Shivaji Stadium, Connaught Place Shivaji Stadium, Connaught Place New Delhi, Delhi 110001', 5]
            ];

            var wrnearbybikaji = [
                [ 28.566903,77.1880163 , ' Wash Room , Ground Floor ,Somdutt Chamber II,  Bhikaji Cama Place New Delhi, Delhi 110066' ,1  ],
                [ 28.569521,77.190682 , ' Shulabh Complex , Block F , Nauroji Nagar , R.K. Puram New Delhi, Delhi 110066' , 2],
                [ 28.567032,77.189558 ,' Shulabh Complex , A2/11 ,Africa Ave Block A2 , Safdarjung Enclave New Delhi , Delhi 110029' ,3 ]
            ];  
             var wrnearbynp = [
                [ 28.548298 , 77.249330 , 'Shulabh Complex , 707 Lala Lajpat Rai Road Nahru Place , New Delhi, Delhi ,110019 ' , 1 ],
                [ 28.5506388 , 77.2513826 , ' Shulabh Complex , Nehru Palce New Delhi , Delhi 110048' , 2 ]
                ];
            var wrnearbycp = [
                [28.631283,77.218708 ,'Shulabh Complex ,Connaught Circus , Connaught Place New Delhi, Delhi 110001' , 1],
                [28.632022,77.222667 ,'Shulabh Complex , Block M, Connaught Place New Delhi, Delhi 110001 ' , 2]
                ];



            function initialize() {
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP ,
                    center: new google.maps.LatLng(28.567924, 77.188079)
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }



            function getlocation() {
                find1 = document.getElementById('place');
                find2 = document.getElementById('location');
                //a = find1.options[find1.selectedIndex].value;
                //b = find1.options[find1.selectedIndex].text;
                //c = find2.options[find2.selectedIndex].value;
                //d = find2.options[find2.selectedIndex].text;
                // if (a == "Restaurants" && c == "Bikaji") 
                {
                if ( find1.value == "Restaurants" && find2.value == "Bikaji" ) 
                {
                    setMarkers(map, rstnearbybikaji);
                } 
                else if  ( find1.value == "Restaurants" && find2.value == "Nehru Place" )
                {
                    setMarkers(map , rstnearbynp);
                }
                else if ( find1.value == "Restaurants" && find2.value == "Cannought Place" )
                {
                    setMarkers(map , rstnearbycp );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Bikaji" )
                {
                    setMarkers(map , wrnearbybikaji );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Nehru Place")
                {
                    setMarkers(map , wrnearbynp );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Cannought Place")
                {
                    setMarkers(map , wrnearbycp );  
                }
                else 
                {
                    alert("Please Select Elements from list box ");
                }

            }
            }

            function setMarkers(map, locations) 
            {

                for (var i = 0; i < locations.length; i++) {
                    var rst =  locations[i]
                    var infowindow = new google.maps.InfoWindow();
                    var myLatLng = new google.maps.LatLng(rst[0], rst[1]);
                    map.setCenter(myLatLng);
                    marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        });


                    //var content = " Address :" + rst[2];
                    google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                        return function () {
                            infowindow.setContent(  locations[i][2])
                            infowindow.open(map, this)
                        }
                    })(this, i))
                    }
                    arr.push(marker);
            }
                function clearMarker()
                    {
                     for( var i=0; i < arr.length;i++)
                        {
                         arr[i].setMap(null);
                        }
                    }




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

</script>
<body>          
            <div class="abc">
    <form>
        <table id="table1">
            <tr>
                <td>Find:</td>
                <td>
                    <select id="place">
                        <option value="Restaurants">Restaurants</option>
                        <option value="Wash Room">Wash Room</option>
                        <option value="Hotels">Hotels</option>
                    </select>
                </td>
                <td id="id1">NearBy:</td>
                <td>
                    <select id="location">
                        <option value="Nehru Place">Nehru Place</option>
                        <option value="Bikaji">Bikaji</option>
                        <option value="Cannought Place">Cannought Place</option>
                    </select>
                </td>
                <td id="find">
                    <input type="button" value="Find" name="search" onclick="getlocation()" style="width:80px " />
                </td>
            </tr>   
        </table>
    </form>
</div>
<div id="map-canvas"></div>
</body>
</html>

Answer 1

我在一個項目中做過同樣的事情。 工作順利！

 var gmarkers = []; //declared globally

 function removeMarkers() {
   for (i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
   }
 }

插入標記時，我曾經將標記插入數組中

gmarkers.push(marker);

根據您的要求調用removeMarkers（）。

Answer 2

我做到了，但在Angular版本中有效:)

http://plnkr.co/edit/caW6vr?p=preview

angular.module('nowCtrls', []).controller('NowCtrl', function() {
  var nc = this;
  nc.positions = [];

  nc.placeMarker = function(event) {
    nc.positions = [];

    var loc = event.latLng;
    nc.positions.push({
      pos: [loc.lat(), loc.lng()]
    });


  };






}).controller('BuyCtrl', function() {

});