无法删除特定标记。错误：未被捕获的TypeError：无法读取未定义的属性'setMap'

Question

我想从Google地图上删除homeMarker，但是当我尝试执行删除功能时，它给了我这个错误：Uncaught TypeError：无法读取未定义的属性“ setMap”。我尝试了其他方法来取消它，但它总是给我这个错误。以下是我的JavaScript，可用来生成我的地图。

$(".selectBox").selectBox();

Answer 1

错误在这里：

var homeMarker = addMarker({
        coords: {
            lat: lat,
            lng: long
        },
        content: '<h3>Current Location</h3>'
    });

addMarker不返回任何内容，因此homeMarker为空。

更改addMarker函数以返回其创建的标记：

//Add marker function
function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    icon: props.iconImage
  });
  markers.push(marker);

  marker.addListener('click', function() {
    map.setZoom(14);
    map.setCenter(marker.getPosition());
  });

  marker.addListener('click', toggleBounce);

  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

  map.addListener('click', function() {
    map.setZoom(11);
  })

  //Check for customicon
  if (props.iconImage) {
    marker.setIcon(props.iconImage);
  }

  //Check content
  if (props.content) {
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    })
  }
  // return the marker
  return marker;  // <============================= add this line
}

proof of concept fiddle

代码段：

var markers = [];
var homeMarker;

function initMap() {
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';

  var c = function(pos) {
    pos = {
      coords: {
        latitude: 40.6975898,
        longitude: -74.2631635
      }
    };
    var lat = pos.coords.latitude,
      long = pos.coords.longitude,
      coords = lat + " , " + long;

    var p1 = {
      lat: 40.735657,
      lng: -74.1723667
    }

    var p2 = {
      lat: lat,
      lng: long
    }
    var rad = function(x) {
      return x * Math.PI / 180;
    };

    var getDistance = function(p1, p2) {
      var R = 6378137; // Earth’s mean radius in meter
      var dLat = rad(p2.lat - p1.lat);
      var dLong = rad(p2.lng - p1.lng);
      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(rad(p1.lat)) * Math.cos(rad(p2.lat)) *
        Math.sin(dLong / 2) * Math.sin(dLong / 2);
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      var d = (parseFloat(R * c));

      console.log(d);
      return d; // returns the distance in meter
    };

    //Home marker
    homeMarker = addMarker({
      coords: {
        lat: lat,
        lng: long
      },
      content: '<h3>Current Location</h3>'
    });

    //Delivery van marker
    var vanMarker = addMarker({
      coords: {
        lat: 40.735657,
        lng: -74.1723667
      },
      iconImage: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      content: '<h3>Delivery Van Location</h3><br><p>Delivery Van is ' + Math.round(getDistance(p1, p2)) + 'm Away from you.'
    });

    //Codes to move markers
    function movingMarkers() {
      homeMarker.setMap(null);
    }

    setInterval(function() {
      movingMarkers();
    }, 5000);

    //Add marker function
    function addMarker(props) {
      var marker = new google.maps.Marker({
        position: props.coords,
        map: map,
        icon: props.iconImage
      });
      markers.push(marker);

      marker.addListener('click', function() {
        map.setZoom(14);
        map.setCenter(marker.getPosition());
      });

      marker.addListener('click', toggleBounce);

      function toggleBounce() {
        if (marker.getAnimation() !== null) {
          marker.setAnimation(null);
        } else {
          marker.setAnimation(google.maps.Animation.BOUNCE);
        }
      }

      map.addListener('click', function() {
        map.setZoom(11);
      })

      //Check for customicon
      if (props.iconImage) {
        marker.setIcon(props.iconImage);
      }

      //Check content
      if (props.content) {
        var infoWindow = new google.maps.InfoWindow({
          content: props.content
        });

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

  }

  var e = function(error) {
    if (error.code === 1) {
      alert('Unable to get location!');
      c();
    }
  }

  navigator.geolocation.getCurrentPosition(c, e);

  //Map options
  var options = {
    zoom: 11,
    center: {
      lat: 40.735657,
      lng: -74.1723667
    }
  }

  var map = new google.maps.Map(document.getElementById('map'), options);

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>