时间戳

首页 > 解决方案 > 无法删除特定标记。错误：未捕获类型错误：无法读取未定义的属性“setMap”

javascript - 无法删除特定标记。错误：未捕获类型错误：无法读取未定义的属性“setMap”

问题描述

我想从谷歌地图中删除 homeMarker，但是当我尝试执行删除功能时，它给了我这个错误： Uncaught TypeError: Cannot read property 'setMap' of undefined。我尝试了不同的方法来更新它，但它总是给我这个错误。下面是我的 JavaScript 来生成我的地图。 

var markers = [];

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

    var c = function(pos) {
        var lat = pos.coords.latitude,
            long = pos.coords.longitude,
            coords = lat + " , " + long;

        var p1 = {
            lat: parseFloat('<%= myLatitude %>'),
            lng: parseFloat('<%= myLongitude %>')
        }

        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
        var homeMarker = addMarker({
            coords: {
                lat: lat,
                lng: long
            },
            content: '<h3>Current Location</h3>'
        });

        //Delivery van marker
        var vanMarker = addMarker({
            coords: {
                lat: parseFloat('<%= myLatitude %>'),
                lng: parseFloat('<%= myLongitude %>')
            },
            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);
                })
            }
        }
    }

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

    navigator.geolocation.getCurrentPosition(c, e);

    //Map options
    var options = {
        zoom: 11,
        center: {
            lat: 1.3521,
            lng: 103.8198
        }
    }

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

}

标签： javascriptgoogle-maps-api-3

解决方案

错误在这里：

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

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

更改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
}

概念证明小提琴

代码片段：

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>

推荐阅读