如何删除固定标记并将其设置为新位置Google Javascript API

Question

如何清除旧的固定marker位置并将其放置在新位置？我正在使用具有自动完成搜索功能的Google Javascript API映射。当我搜索位置时，标记将固定在地图中的位置上，如果我键入新位置，它将添加另一个marker，但是我不希望这样，我希望它添加{{1} }移至新位置，然后清除旧的固定位置。

示例图片

从上图中，我只希望在当前键入的位置上放置一个绿色标记，如果位置更改，它将仅放置在新的位置上，而不会创建多个标记。

marker

	  var autocomplete;
      var countryRestrict = {'country': 'us'};
      var MARKER_PATH = 'https://developers.google.com/maps/documentation/javascript/images/marker_green';
	  
      var componentForm = {
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name'
      };
	  
	  var initOptions = { 
		  'current': { 
			  center: {lat: 2.9248795999999997, lng: 101.63688289999999}, 
			  zoom: 15, 
			  country: 'MY', 
			  componentRestrictions: {'country': 'us'} 
		  } 
	  };
  
    var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };
	  
	function initGoogleMap() {
		var map = new google.maps.Map(document.getElementById('map'), {
          zoom: initOptions['current'].zoom,
          center: initOptions['current'].center,
          mapTypeControl: false,
          panControl: false,
          zoomControl: false,
          streetViewControl: false,
		  clickableIcons: false,
		  fullscreenControl: false
        });
		
		var input = document.getElementById('SeachLOcationToBuy');
        autocomplete = new google.maps.places.Autocomplete(input);
		autocomplete.bindTo('bounds', map);
		/*map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);*/
		
		autocomplete.setComponentRestrictions({'country': initOptions['current'].country}); 
		
		var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (1 % 26));
		var markerIcon = MARKER_PATH + markerLetter + '.png';
		
		var infoWindow = new google.maps.InfoWindow;
		
		autocomplete.addListener('place_changed', function() {
			
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            return;
          }
		  
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location); 
            map.setZoom(17);
          }
		  
		  var point = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
			var marker = new google.maps.Marker({
			  map: map,
			  position: point,
			  icon: markerIcon,
			  label: 'P'
			});

		  fillInAddress(place);
		  document.getElementById('UpdateFoodAddress').disabled = false;
		  document.getElementById('full_address').value = input.value;
		   
  
          /*Set the position of the marker using the place ID and location.*/
          marker.setPlace({
            placeId: place.place_id,
            location: place.geometry.location
          });
          marker.setVisible(true);
        });
		
		 downloadUrl("_api/setGeoXmlLocation.php?geolocate=true", function(data) {
			var xml = data.responseXML;
			var markers = xml.documentElement.getElementsByTagName('marker');
			var counts = xml.documentElement.getElementsByTagName('counter')[0].childNodes[0];
		
			Array.prototype.forEach.call(markers, function(markerElem) {
			  var id = markerElem.getAttribute('id');
			  var name = markerElem.getAttribute('name');
			  var logo = markerElem.getAttribute('logo');
			  var address = markerElem.getAttribute('address');
			  var type = markerElem.getAttribute('type');
			  var page = markerElem.getAttribute('page');
			  var point = new google.maps.LatLng(
				  parseFloat(markerElem.getAttribute('lat')),
				  parseFloat(markerElem.getAttribute('lng'))
			   );
			   
			  var infowincontent = document.createElement('div');
			  var strong = document.createElement('strong');
			  var img = document.createElement('img');
			  var imgbox = document.createElement('div');
			  var br = document.createElement('br');
			  var span = document.createElement('span');
			  var text = document.createElement('text');
			  /*WINDOW*/
			  infowincontent.setAttribute("class", "app-map-info-window");
			  text.textContent = address;
			  infowincontent.appendChild(text);
			  var icon = customLabel[type] || {};
			  var marker = new google.maps.Marker({
				map: map,
				position: point,
				label:  icon.label
			  });

			  marker.addListener('click', function() {
				infoWindow.setContent(infowincontent);
				infoWindow.open(map, marker);
			  });
			});
		  });
        }


	function fillInAddress(place) {

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
    }
	  
	function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
    }
	  
    function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
    }

    function doNothing(){
		
	}
initGoogleMap();

Answer 1

1）创建一个全局可访问数组var markers = []。

2）将创建的标记的所有引用推入该数组。

3）当您要删除这些标记之一时，只需要从阵列中删除该标记即可。

一个例子：

var markers = []; //Global Marker array to keep references
 var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        icon: icon,
        map: map
    });
    markers.push(marker);

removeMarker: function () {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers = [];
},

您现在只需将其转移到您的代码即可。下次发布相关代码将是一个好主意。

希望有帮助。