setMap（）未定义

Question

我正在尝试从地图中删除使用Google Map API创建的标记。看起来我没有使用GM API，这个功能是未定义的，否则我会这样做。怎么了？你可以帮我解决这个问题，因为这是我第一次使用任何API。

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

function Point(index, latitude, longitude) {
    this.index = index;
    this.latitude = latitude;
    this.longitude = longitude;
}

map.markers = [];


function DeleteMarker(index) {
    console.log(JSON.stringify(map.markers[index]));
    map.markers[index].setMap(null); ///////PROBLEM IS HERE
    map.markers[index] = null;
    map.markers.splice(index, 1);
}

google.maps.event.addListener(map, 'click', function (event) {
    placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        animation: google.maps.Animation.DROP,
        map: map
    });
    var index = map.markers.length;
    map.markers.push(new Point(map.markers.length, location.lat(), location.lng()));
    console.log(JSON.stringify(map.markers.length));

    var infowindow = new google.maps.InfoWindow({
        content: '<p>Details:'
            + '<p>Latitude:' + location.lat() + '</p>'
            + '<p>Longitude:' + location.lng() + '</p>' +
            '<button id ="btnDeleteMarker" onclick=DeleteMarker(\'' + index + '\')>Delete this stop</button>'
    });

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

Answer 1

您的map.markers数组是Point个对象的数组，它们没有.setMap方法。

map.markers.push(new Point(map.markers.length, location.lat(), location.lng()));

google.maps.Marker对象将采用setMap方法。这可能就是你想要放在你的数组中的。

proof of concept fiddle

＆＃13;

＆＃13;

var geocoder;
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  map.markers = [];
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}
google.maps.event.addDomListener(window, "load", initialize);


function Point(index, latitude, longitude) {
  this.index = index;
  this.latitude = latitude;
  this.longitude = longitude;
}

function DeleteMarker(index) {
  console.log("marker index=" + index);
  map.markers[index].setMap(null); ///////PROBLEM IS HERE
  map.markers[index] = null;
  map.markers.splice(index, 1);
}



function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    animation: google.maps.Animation.DROP,
    map: map
  });
  var index = map.markers.length;
  map.markers.push(marker /* new Point(map.markers.length, location.lat(), location.lng())*/ );
  console.log(JSON.stringify(map.markers.length));

  var infowindow = new google.maps.InfoWindow({
    content: '<p>Details:' + '<p>Latitude:' + location.lat() + '</p>' + '<p>Longitude:' + location.lng() + '</p>' +
      '<button id ="btnDeleteMarker" onclick=DeleteMarker(\'' + index + '\')>Delete this stop</button>'
  });

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;