javascript - Google मानचित्र API v3: सभी मार्करों को कैसे हटाएं?




html google-maps (20)

Google मानचित्र API v2 में, यदि मैं सभी मानचित्र मार्करों को हटाना चाहता था, तो मैं बस ऐसा कर सकता था:

map.clearOverlays();

मैं इसे Google मानचित्र API v3 में कैसे करूं?

संदर्भ एपीआई को देखते हुए, यह मेरे लिए अस्पष्ट है।


Google की डेमो गैलरी में यह एक डेमो है कि वे इसे कैसे करते हैं:

overlay-overview

आप स्रोत कोड देख सकते हैं कि वे मार्कर कैसे जोड़ते हैं।

लंबी कहानी छोटी है, वे मार्करों को वैश्विक सरणी में रखते हैं। उन्हें साफ़ करने / हटाने पर, वे सरणी के माध्यम से लूप करते हैं और दिए गए मार्कर ऑब्जेक्ट पर ".setMap (null)" कहते हैं।

हालांकि, यह उदाहरण एक 'चाल' दिखाता है। इस उदाहरण के लिए "साफ़ करें" का अर्थ है उन्हें मानचित्र से हटा देना, लेकिन उन्हें सरणी में रखना, जो एप्लिकेशन को उन्हें मानचित्र में त्वरित रूप से फिर से जोड़ने की अनुमति देता है। एक मायने में, यह उन्हें "छिपाने" की तरह काम करता है।

"हटाएं" सरणी को भी साफ़ करता है।


Polys, मार्कर, आदि सहित सभी ओवरले साफ़ करने के लिए ...

बस उपयोग करें:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

यहां एक ऐसा फ़ंक्शन है जिसे मैंने लिखा है कि यह मुझे मानचित्र एप्लिकेशन पर बनाये:

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

आप का मतलब है उन्हें छिपाने या उन्हें हटाने में हटा दें?

अगर छुपाएं:

function clearMarkers() {
            setAllMap(null);
        }

अगर आप उन्हें हटाना चाहते हैं:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

ध्यान दें कि मैं उनका ट्रैक रखने और इसे मैन्युअल रूप से रीसेट करने के लिए एक सरणी मार्कर का उपयोग करता हूं।


आपको उस मार्कर पर नक्शा शून्य सेट करने की आवश्यकता है।

var markersList = [];    

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

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

एक ही समस्या है। यह कोड अब और काम नहीं करता है।

मैंने इसे सही किया है, स्पष्ट मार्कर विधि को इस तरह से बदलें:

set_map (शून्य) ---> सेटमैप (शून्य)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

दस्तावेज को विषय पर विवरण शामिल करने के लिए अद्यतन किया गया है: https://developers.google.com/maps/documentation/javascript/markers#remove


एनन से निम्नलिखित पूरी तरह से काम करता है, हालांकि झिलमिलाहट के साथ बार-बार ओवरले साफ़ करने पर।

बस निम्न कार्य करें:

I. एक वैश्विक चर घोषित करें:

var markersArray = [];

द्वितीय। एक समारोह को परिभाषित करें:

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

तृतीय। निम्नलिखित कॉल करने से पहले 'मार्करएरे' में पुश मार्कर:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

चतुर्थ। जहां भी आवश्यक हो, clearOverlays() फ़ंक्शन को कॉल करें।

बस!!

उम्मीद है कि आपकी मदद करेगा।


दोनों उत्तरों में पोस्ट किया गया " set_map " फ़ंक्शन अब Google मानचित्र v3 API में काम नहीं करता है।

पता नहीं क्या हुआ होगा

अद्यतन करें:

ऐसा लगता है कि Google ने अपना एपीआई बदल दिया है कि " set_map " " set_map " नहीं है।

http://code.google.com/apis/maps/documentation/v3/reference.html


नए संस्करण v3 पर, उन्होंने सरणी में रखने की सिफारिश की। निम्नलिखित के रूप में।

overlay-overview पर नमूना देखें।

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

बस निम्न कार्य करें:

I. एक वैश्विक चर घोषित करें:

var markersArray = [];

द्वितीय। एक समारोह को परिभाषित करें:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

या

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

तृतीय। निम्नलिखित कॉल करने से पहले 'मार्करएरे' में पुश मार्कर:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

चतुर्थ। clearOverlays(); कॉल clearOverlays(); कॉल करें clearOverlays(); या map.clearOverlays(); जहां भी आवश्यक हो समारोह।

बस!!


बस मार्करों पर चलें और उन्हें मानचित्र से हटाएं, उसके बाद खाली नक्शा मार्कर सरणी:

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];

मुझे पता है कि यह शायद एक समान समाधान है, लेकिन यह वही है जो मैं करता हूं

$("#map_canvas").html("");
markers = [];

मेरे लिए हर बार काम करता है।


मुझे सरल समाधान मिला (मुझे लगता है):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

मैं एक शॉर्टेंड का उपयोग करता हूं जो नौकरी अच्छी तरह से करता है। बस करो

    map.clear();

मैं नहीं जानता कि क्यों, लेकिन, मेरे मार्करों को setMap(null) सेट करना मेरे लिए काम नहीं करता है जब मैं DirectionsRenderer का उपयोग कर रहा हूं।

मेरे मामले में मुझे अपने DirectionsRenderer को setMap(null) कॉल करना पड़ा।

ऐसा कुछ:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

मैंने अभी kmlLayer.setMap (शून्य) के साथ यह कोशिश की है और यह काम किया है। सुनिश्चित नहीं है कि यह नियमित मार्करों के साथ काम करेगा लेकिन सही तरीके से काम करता प्रतीत होता है।


मैंने सभी प्रस्तावित समाधानों का प्रयास किया है, लेकिन मेरे लिए कुछ भी काम नहीं किया गया, जबकि मेरे सभी मार्कर क्लस्टर के अधीन थे। आखिर में मैंने इसे अभी रखा:

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

दूसरे शब्दों में, यदि आप क्लस्टर में मार्कर लपेटते हैं और सभी मार्करों को हटाना चाहते हैं, तो आप कॉल करते हैं:

clearMarkers();

यह वह तरीका है जिसे Google स्वयं कम से कम एक नमूने में उपयोग करता है:

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

पूर्ण कोड उदाहरण के लिए Google नमूना देखें:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox


यहां आप मार्करों को हटाने का उदाहरण पा सकते हैं:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

समाधान बहुत आसान है। आप विधि का उपयोग कर सकते हैं: marker.setMap(map); । यहां, आप परिभाषित करते हैं कि पिन किस मानचित्र पर दिखाई देगा।

इसलिए, यदि आप इस विधि में null सेट करते हैं ( marker.setMap(null); ), पिन गायब हो जाएगा।

अब, आप अपने मानचित्र में सभी मार्कर गायब होने के दौरान एक फ़ंक्शन चुड़ैल लिख सकते हैं!

आप बस अपने पिन को एक सरणी में डालने के लिए जोड़ते हैं और उन्हें markers.push (your_new pin) या इस कोड के साथ घोषित करते हैं उदाहरण के लिए:

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

यह एक फ़ंक्शन चुड़ैल मानचित्र में आपके सरणी के सभी मार्कर सेट या गायब कर सकता है:

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

अपने सभी मार्कर गायब होने के लिए, आपको फ़ंक्शन को शून्य से कॉल करना चाहिए:

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

और, अपने सभी मार्करों को हटाने और गायब करने के लिए, आपको इस तरह के मार्करों की अपनी सरणी रीसेट करनी चाहिए:

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

यह मेरा पूरा कोड है। सावधान रहें आप अपने कुंजी google API द्वारा कोड में YOUR_API_KEY को प्रतिस्थापित कर सकते हैं:

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

आपको Google डेवलपर या Google डेवलपर वेबसाइट पर भी पूर्ण दस्तावेज़ों से परामर्श लेना चाहिए।


for (i in markersArray) {
  markersArray[i].setMap(null);
}

केवल आईई पर काम कर रहा है।

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

क्रोम, फ़ायरफ़ॉक्स, यानी काम कर रहा है ...





google-maps-api-3