javascript - 使用 Google map 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 个标记。 迭代器设置为100。
3. 您又检索到 100 个标记。 allmarkers 现在为 200。
4. 您调用 setMarkersMap() 从 0 迭代到 200。iterator 已经位于 100，将尝试达到 300。在标记 201 处，它将尝试对不存在的索引进行操作所有标记

您可以通过多种方式到达此处:

• 不要尝试在一个循环中操作新旧标记。关闭旧的，然后打开新的。
• 如果您想保存最后一批的索引，从而达到全局变量的目的，请不要从 0 迭代到 allmarkers.length，而是从 iterator 迭代> 到 allmarkers.length。
• 如果您不再需要旧批处理的标记，请勿将其 map 设置为空。将它们从你的数组中取出

.

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

如果您选择后者，那么您将始终对 0-100 个批处理进行操作。