Question

编辑：我已经设法让这个工作，最后的代码片段是我的代码的解决方案。

这里相当新，如果我的问题不完美，我很抱歉。

我正在创建一个包含Google地图的网站。

用户输入自己的地址或Geolocate查找其位置，然后脚本计算用户与所有办公室分支之间的距离。选择了3个最近的分支。

用户可以选择动态更改地址，或者在固定菜单中切换到地理位置，反之亦然。

我需要将用户路由到最近的办公室并使用标记内容div来调用JS函数，因此需要完全编辑标记。你们告诉我，如果最好简单地删除所有标记并重新生成它们，或者更好的做法是编辑标记。

地理定位或地理编码后，它会调用此函数：

编辑：警告黑暗代码！

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);

}

和createMarkers函数：

编辑：警告黑暗代码！

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 :\'( ');


    }


}

我正处于键入第二个地址的位置，它控制台.log一个字符串。我尝试了很多东西，但我无法编辑标记或删除它们。

如果你们可以简单地指出在哪里寻找，那么任何帮助都会受到赞赏。

非常感谢你，请记住我在这里相当新，所以如果我的问题不合适/不完整请留下积极的信息，这样我就可以变得更好!!

编辑：现在我开始工作了，主要的是你需要为每个标记调用这个函数：

google.maps.event.addListener（标记， “点击”，函数（）{}）;

我删除了整个addMarker函数并将代码直接放入createMarkers（）;

var markers = []; //存储标记

function createMarkers（nearest_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();
}

清除当前标记：

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

Answer 1

我建议您删除所有标记并再次调用该函数：

 ......
} 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

您可以使用新引脚更新现有地图。我个人认为这会创造更好的用户体验。用户可以查看办公地点的更新情况，而无需记住他们之前搜索的位置。

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

function clearMarkers() {
  setAllMap(null);
}

function showMarkers() {
  setAllMap(map);
}

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

Google地图会从阵列中编辑多个标记

2 个答案: