如何删除google map API中的方向标记

时间:2014-08-26 09:36:47

标签: javascript google-maps google-maps-api-3

我想在搜索后删除谷歌地图方向标记而不重新加载页面。我已经做了一个例子,但它不起作用:

//First of all testing if there is already a direction on the map

if(directionsService != null) 
{
  directionsService.setMap(null);
  directionsService = null;
}

  //Then display the new one

  var origin = $('#de').val();
  var destination = $('#en').val();
  var request = {
        origin      : origin,
        destination : destination,
        travelMode  : google.maps.DirectionsTravelMode.DRIVING 
    }

    var directionsService = new google.maps.DirectionsService(); 
            directionsService.route(request, function(response, status){ 
                if(status == google.maps.DirectionsStatus.OK){
                    direction.setDirections(response); 
                    showSteps(response);
                }
    });

所有这些代码都在一个由click事件调用的函数

<button id="envoyer" id=="env" onclick="javascript:c()">Send</button>   

所以任何人都有一个想法谢谢!

更新

function showSteps(directionResult) {
  var markerArray = [];
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
    var marker = new google.maps.Marker({
      position: myRoute.steps[i].start_location,
      map: map
    });
    attachInstructionText(marker, myRoute.steps[i].instructions);
    markerArray[i] = marker;
  }
}

1 个答案:

答案 0 :(得分:1)

清除行程时,使用directionsService.setMap(null);,你必须同时删除没有直接连接到Direction - Service的MapMarkers。

您已将它们存储在markerArray函数内的showSteps中,因此您需要将此变量从函数中移出到外部作用域中,或让函数将其返回以便能够访问它。

通过执行此操作,您只需循环遍历markerArray并在每个存储的标记上调用.setMap(null),从而将其从地图中删除。

var markerArray = [];

function showSteps(directionResult){

// your code

}

//function to remove MapMarkers
function removeMapMarkers(){

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

    markerArray = [];

}