Google Maps从数组中编辑多个标记

Question

EDIT : I've managed to get this working and the last code snippet is the solution to my code.

Fairly new here and I'm sorry if my question is not perfect.

I'm creating a website with a Google Map.

The user enters his own address or Geolocate to find its position, then the script calculates the distance between the user and all the offices branches. The 3 closest branches are selected.

The user has the option to change his address on the fly, or switch to geolocation, vice versa in a fixed menu.

I will need to route the user to closest office and have marker content div with buttons to call JS functions, so the markers need to be edited completely. You guys tell me if it's better to simply delete all markers and respawn them or if it's better practice to edit the markers in place.

Once geolocation or geocoding, it calls this function:

Edit : Warning BAD CODE!

function successCall(position) {

    //Gets data from both getLocation & codeAddress !

    // Branch_id and distance for all branches
    // Resets the arrays.
    var branches_distance = [];
    var branches_closest = [];

    var userlat = position.coords.latitude;
    var userlng = position.coords.longitude;

    //Store ID and Distance of branch in array
    for (i = 0; i < branches_array.length; i++){
        var branch_distance = {
            id: branches_array[i].branch_id,
            distance: calculateDistance(userlat, userlng, branches_array[i].branch_lat, branches_array[i].branch_lng)
        }
        branches_distance.push(branch_distance);
    }

    //Sort branches_distance from closest to farthest
    for (i = 0; i < branches_distance.length; i++){
        sortByKey(branches_distance, 'distance');
    }

    //Populate branches_closest with branch IDs
    for (i = 0; i < branchesToShow; i++){ // SETTING
        branches_closest.push(branches_distance[i].id);
    }


    //TIME TO MAKE MARKERS AND ROUTES
    createMarkers(branches_closest, userlat, userlng);

}

and createMarkers function :

Edit : Warning BAD CODE!

var markers = [];

zero = 0;

function createMarkers(closest_items, ulat, ulng) {


    //If markers array is empty, create markers
    if(zero == markers.length){

        //Create User Loc marker and push in the array       
        var userLatLng = new google.maps.LatLng(ulat, ulng);

        var uMarker = new google.maps.Marker({
                position: userLatLng,
                id: 'user'
        });

        markers.push(uMarker);

        //Create branches markers
        for (i = 0; i < closest_items.length; i++){

            var result = $.grep(branches_array, function(e){ return e.branch_id == closest_items[i]; });

            var latLng = new google.maps.LatLng(result[0].branch_lat, result[0].branch_lng);

            var marker = new google.maps.Marker({
                position: latLng,
                id: closest_items[i]
            });

            markers.push(marker);
        }


        for (index in markers) {
            addMarker(markers[index]);   
        }

        console.log(markers);


    } else {

        console.log('I just want to update my markers :\'( ');


    }


} 

I'm at the point where when you type in a second address, it console.log a string. I tried many things but I can't get to edit markers or delete them.

If you guys can simply point out where to look, any help would be appreciated.

Thank you very much and keep in mind I'm fairly new here so if my question is unappropriate / incomplete please leave positive info about it so I can get better !!

Edit : Now I got it working, the main things is that you need to call this function for every marker :

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

I removed the whole addMarker function and put code directly into createMarkers();

var markers = []; // storing markers

function createMarkers(closest_items, ulat, ulng) {

  clearOverlays(); var infowindow = new google.maps.InfoWindow(); //Markers have been cleared, hurray, lets pop some new var uLatLng = new google.maps.LatLng(ulat, ulng); umarker = new google.maps.Marker({ position: uLatLng, map: map, title: 'user' }); markers.push(umarker); google.maps.event.addListener(umarker,"click",function(){ infowindow.setContent(umarker.title); infowindow.open(map, umarker); }); for (i = 0; i < closest_items.length; i++) { var result = $.grep(branches_array, function(e){ return e.branch_id == closest_items[i]; }); var latLng = new google.maps.LatLng(result[0].branch_lat, result[0].branch_lng); marker = new google.maps.Marker({ position: latLng, map: map, title: closest_items[i].toString() }); markers.push(marker); google.maps.event.addListener(marker,"click",function(){ infowindow.setContent(this.title); infowindow.open(map, this); }); } makeRoute(); } 

Clearing the current markers:

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

Answer 1

I suggest you delete all markers and call the function again:

 ......
} else {
      for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null); // remove marker
      }

      // Reset the array
      markers = [];

      // Call the function again. The markers size will be zero and 
      // everything will work fine!
      createMarkers(closest_items, ulat, ulng);
}

Answer 2

You could update the existing map with the new pins. Personally I think this would create a better user experience. The user can see office locations updating without having to remeber where they were on their previous search.

DEMO http://jsfiddle.net/cmd932z3/20/

function clearMarkers() {
  setAllMap(null);
}

function showMarkers() {
  setAllMap(map);
}

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