Google Maps API v3：删除标记 [英] Google Maps API v3: remove marker

问题描述

嗨专家，

我有一个Google商店定位器。一切似乎都有效，除非我尝试新的搜索时它不会清除以前的标记。

这里是我的javascript代码：

Hi Experts,
i have a Google store locator. everything seem to work except when i try new search it doesn't clear previous markers.
here is my javascript code:

<script lang="javascript" type="text/javascript">
        var map;
        var mapOptions;
        var geocoder;
        var info_Window;
        

        var http_request = false;
        var lat = 0;
        var lng = 0;

        var startingLat = 58.859223547066584; 
        var startingLng = -99.84375;
        var startingZoom = 3;

        function mapLoad() { 
            geocoder = new google.maps.Geocoder();
            mapOptions = {
                center: new google.maps.LatLng(startingLat, startingLng),
                zoom: startingZoom,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }
        
        function searchLocations() {
            
            var address = document.getElementById('postalCode').value;
            var searchString = address;

            geocoder.geocode({ address: searchString }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    searchLocationsNear(results[0].geometry.location);
                }
                else
                    map = new google.maps.Map(document.getElementById('map'), mapOptions); var sbar = document.getElementById('sidebar');
                    sbar.innerHTML = 'address ( ' + searchString + ' ) not found on Google!';
            });

        }

        function searchLocationsNear(center) {
            var radius = document.getElementById('ddlRadius').value;
            var searchUrl = 'Results.aspx?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;


            downloadUrl(searchUrl, function (data) {


                //clear side bar entries
                var sbar = document.getElementById('sidebar');
                sbar.innerHTML = '';
               
                if (data.documentElement == null) {
                    sbar.innerHTML = 'No results found.  Please try widening your search area.';
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    return;
                }

                var locations = data.documentElement.getElementsByTagName('marker');

                if (locations.length == 0) {
                    sbar.innerHTML = 'No results found.  Please try widening your search area.';
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    return;
                }

                var bounds = new google.maps.LatLngBounds();
                var mapmarker;
                for (var i = 0; i < locations.length; i++) {
                    var addName = locations[i].getAttribute('LocationDescription');
                    var address1 = locations[i].getAttribute('Address1');
                    var Phone = locations[i].getAttribute('Phone');
                    var town = locations[i].getAttribute('Town');
                    var postcode = locations[i].getAttribute('Postcode');
                    var distance = parseFloat(locations[i].getAttribute('distance'));
                    var direction = "hello";
                    var add = "type your address";
                    var Customeraddress = document.getElementById('postalCode').value;
                    direction = "<a href='http://maps.google.com/maps?saddr=" + Customeraddress + "&daddr=" + address1 + "&hl=en' style='text-decoration: none;color:rgb(40,149,221);font-weight:bold;font-size:14px;' target='_blank'>get directions</a>";
                   
                    var point = new google.maps.LatLng(parseFloat(locations[i].getAttribute('Latitude')), parseFloat(locations[i].getAttribute('Longitude')));
                    bounds.extend(point);

                    //to make name bold.
                    addName='' + addName+''
                    var mapmarker = createMarker(point, addName, address1, town, postcode, Phone, direction);
                    var sidebarEntry = createSidebarEntry(mapmarker, addName, address1, town, Phone, distance);
                    sbar.appendChild(sidebarEntry);
                }

                var pointCenter = bounds.getCenter();
                var iZoomLevel = map.fitBounds(bounds);
                map.setCenter(pointCenter, iZoomLevel);
            });
        }        

        // Create the marker with address info.
        function createMarker(point, addName, address1, Phone, town, postcode, direction) {
            var image = 'img/letter_A1.png';
            
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: point,
                title: address1,
                animation: google.maps.Animation.DROP

            });

            var html;
            if (Phone == null) {
                html = '<div class="test">' + addName + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode + '<br/>' + direction + addName + '</div>';
            }
            else {
                html = '<div class="test">' + addName + '<br/>' + address1 + ', ' + town + '<br/>' + postcode + '<br/>' + Phone + '<br/>' + direction + '</div>';
            }
            info_Window = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, "click", function () {                
                info_Window.setContent(html);
                info_Window.open(map, marker);              
            });

            return marker; 
        }
        // Create the side bar entry as a menu item
        function createSidebarEntry(marker, addName, address1, Phone, town, distance) {
            var div = document.createElement('div');
            var address;
            if (Phone == '' || Phone == null) {
                address =addName +'</br>' + address1 + '</br>' + town;
            }
            else {
                address = addName + '</br>' + address1 + '</br>' + Phone + '</br>' + town;
            }
            var html = '<div class="title">' + distance.toFixed(2) + ' miles: <br/></div>' + address;
            div.innerHTML = html;
            div.style.cursor = 'pointer';
            div.style.marginBottom = '10px';
            //div.style.cssFloat = 'left';
            div.className = 'span3';
            google.maps.event.addDomListener(div, "click", function () {
                google.maps.event.trigger(marker, "click");
            });
            google.maps.event.addDomListener(div, "mouseover", function () {
                div.style.backgroundColor = '#eee';
            });
            google.maps.event.addDomListener(div, "mouseout", function () {
                div.style.backgroundColor = '#fff';
            });
            return div;
        }
    </script>

我做错了什么，请指教。



提前感谢

what am i doing wrong, please advise.

thanks in advance

推荐答案

将所有标记放入数组中，以便您可以参考它们以便清除他们。

查看此内容： Google Maps V3 - 全部删除标记 [ ^ ]

Place all markers into an array, so that you can refer to them in order to clear them.
Check this out: Google Maps V3 - Remove all Markers[^]

谢谢你@Peter Leow的帮助。

帖子很有帮助。这就是我所做的：

1-添加了一系列标记：

thank You @Peter Leow for your help.
the post was helpful. here's what i have done:
1- added an array of markers:

var markers = [];

2-填写我的函数来创建标记：

2- fill it in my function to create markers:

// Create the marker with address info.
        function createMarker(point, addName, address1, Phone, town, postcode, direction) {
            var image = 'img/letter_A1.png';
            var marker;
            marker = 0;
            marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: point,
                title: address1,
                animation: google.maps.Animation.DROP

            });
            
            var html;
            if (Phone == null) {
                html = '<div class="test">' + addName + '<br />' + address1 + '<br />' + town + '<br />' + postcode + '<br />' + direction + addName + '</div>';
            }
            else {
                html = '<div class="test">' + addName + '<br />' + address1 + ', ' + town + '<br />' + postcode + '<br />' + Phone + '<br />' + direction + '</div>';
            }
            info_Window = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, "click", function () {
                info_Window.setContent(html);
                info_Window.open(map, marker);
            });

            markers.push(marker); 
            return marker; //here i return only marker for the side bar.
        }

3-然后创建一个清除标记数组的函数：

3- then create a function to clear the array of markers:

//clear markers before starting new search 
        function clearLocations() {
            info_Window = new google.maps.InfoWindow();
            info_Window.close();
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers.length = 0;
        }

        function searchLocationsNear(center) {
            //call clrear markers
            clearLocations();
            //search ;

它对我有用。如果它将来会有所帮助。



谢谢，

Samira

it works for me. in case it will help in the future.

thanks,
Samira

如果你是阵列超过1000个标记，只需清除标记和事件的整个地图就会更快，尤其是每个标记上的点击事件，因为内存大小

If you array is over 1000 markers it would be faster to just clear the whole map of markers and events, especially click event on each marker, due to memmory size

   map.clear();
// if you have extra events on the map make a new function to call after clear();
function getMapEvents(){

   map.addListener('zoom_changed',function(){});

}

这篇关于Google Maps API v3：删除标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！