使用 Google 地图 Javascript API 时无法读取未定义的 setMap 属性

Question

我在页面加载时调用初始化函数。哪个正确设置了所有标记。然后我有一个搜索框和一个提交按钮，它清除所有标记，然后获取一个新的 JSON 对象，该对象由要创建的新标记组成。一旦我输入搜索查询并调用 getWorldTweets 函数，我就会收到此错误：

无法读取未定义的 setMap 属性

它指向 addMarker 和 deleteMarker 函数。

var map;
var marker;
var allmarkers = [];
var iterator = 0;
var riterator = 0;
var geocoder = new google.maps.Geocoder();

var search = {
  q: ""
};
function initialize() {
      var mapOptions = {
      //center: new google.maps.LatLng(-34.397, 150.644),
      center: new google.maps.LatLng(0,0),
      zoom: 2,
      //draggable: false,
      minZoom: 1
    };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
getWorldTweets();
}

function getWorldTweets(){
  deleteMarkers();
  iterator = 0;
  riterator = 0;
  $.ajax({
        type: 'POST',
        url: 'php/worldTweetsDatabaseHandler.php',
        data: search,
        dataType : 'json',
        success: function( res ) {
          console.log(res);
          for(var x in res){
            var myLatlng = new google.maps.LatLng(res[x]['LATITUDE'],res[x]['LONGITUDE']);
            marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            icon: "img/tweetmarker2.png",
            position: myLatlng,
            title: res[x]['TWEET_TEXT']
            });
            allmarkers.push(marker); 
          }
          setMarkersMap();
        }
    });
}

function addMarker(){
  allmarkers[iterator].setMap(map);
  iterator++;
}
function deleteMarker(){
  allmarkers[riterator].setMap(null);
  riterator++;
}

function setMarkersMap(){
  for(var i = 0;i<allmarkers.length;i++){
    setTimeout(function(){
      addMarker();
    },i*100);
    setTimeout(function(){
      deleteMarker();
    },i*500);
  }
}


function setAllMap(map){
  for(var i = 0;i<allmarkers.length;i++){
    //console.log("hello");
    allmarkers[i].setMap(map);
  }
}

function clearMarkers() {
  setAllMap(null);
}

function deleteMarkers() {
  console.log("in delete");
  clearMarkers();
  allmarkers = [];
}

$("#submit").on("click", function () { 
  search.q=document.getElementById('searchquery').value;
  //deleteMarkers();
  getWorldTweets(); 
});

$("#searchquery").keyup(function(event){
    if(event.keyCode == 13){
        $("#submit").click();
    }
});

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

google.maps.event.addDomListener(window, 'load', initialize);

谁能告诉我出了什么问题。

谢谢。

Answer 1

添加所有标记后，全局变量 iterator 保存最新标记的索引。

如果在任何给定点您想丢弃旧标记集合并添加新集合，则需要将 iterator 重置为零，否则您将尝试设置超过allmarkers 数组。

例如

1. 您的原始 getTweets 检索到 100 个标记。您的 allmarkers 数组有 100 个项目
2. 您调用 setMarkersMap()，它会遍历 allmarkers 的 100 个标记。 iterator 设置为 100。
3. 您又检索了 100 个标记。 allmarkers 现在是 200。
4. 您调用 setMarkersMap() 以从 0 迭代到 200。iterator 已经为 100，将尝试升至 300。在标记 201 处，它将尝试对不存在的 allmarkers 索引进行操作

这里有几种方法：

• 不要尝试在一个循环中对新旧标记进行操作。关闭旧的，然后打开新的。
• 如果您想保存最后一批的索引，因此要使用全局变量，请不要从 0 迭代到 allmarkers.length，而是从 iterator 迭代到 allmarkers.length。
• 如果您永远不需要一批旧的标记，不要只是将它们的地图设置为空。将它们从您的阵列中取出

.

while(allmarkers.length) {
  var oldMarker=allmarkers.pop();
  oldMarker.setMap(null);
  // delete oldMarker;  // optionally delete it, allegedly it's unnnecesary.
}

如果您执行后者，那么您将始终在 0-100 批次上操作。