gpt4 book ai didi

javascript - 使用 Google map Javascript API 时无法读取未定义的 setMap 属性

转载 作者:行者123 更新时间:2023-11-28 07:49:45 26 4
gpt4 key购买 nike

我在页面加载时调用初始化函数。它正确设置了所有标记。然后我有一个搜索框和一个提交按钮,该按钮清除所有标记,然后获取一个新的 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);

有人可以告诉我出了什么问题吗?

谢谢。

最佳答案

添加所有标记后,全局变量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 个批处理进行操作。

关于javascript - 使用 Google map Javascript API 时无法读取未定义的 setMap 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26987993/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com