Javascript 谷歌地图不断调用API

我有这个代码来更新标记，是的，它工作得很好，但每次刷新时，它都会调用GoogleMapsAPI，我如何让它调用一次，并且只更新标记。我知道那里有一个指南，对javascript来说是很新的，我试过了，但没有一个有效。有人能帮忙吗

var pokemon_name = "";
var pokemon_array = [];
var infoWindowContent = [];
var markers = [];
var pokeImage = [];
var markers_data = [];
var infos_data = [];
var icon_data = "";

jQuery(function($) {
    // Asynchronously Load the map API
    //callAPI();
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=KEYHERE&callback=callAPI";
    document.body.appendChild(script);
});

function callAPI() {

            $.ajax({
                type: 'POST',
                url: 'getpoke.php',
                dataType: 'json',
                data: $("#refresh_form").serialize(),
                cache: false,
                contentType: false,
                processData: false,
                success:function(data) {

    bounds = new google.maps.LatLngBounds();
    mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    initialize(data);
            }
            });

}

setInterval(function(){callAPI();}, 10000);

 function deleteMarkers() {
        markers = [];
        infoWindowContent = [];
        pokeImage = []
}

function initialize(data) {

    deleteMarkers();

    var pokedata = $.parseJSON(data);

    $.ajax({
            url : "pokemonlist.txt",
            dataType: "text",
            success : function (data) {
        var lines = data.split('\n');

        for(var i=0;i<lines.length;i++) {
            var arr = lines[i].split('"');

            pokemon_id = arr[1];
            pokemon_img = arr[3];
            pokemon_name = arr[4];
            pokemon_id = pokemon_id.trim();
            pokemon_img = pokemon_img.trim();
            pokemon_name = pokemon_name.trim();

            pokemon_array.push([ pokemon_id, pokemon_img, pokemon_name ]);
        }


    for (var i = 0; i < pokedata['data'].length; i++) {
    for (var x = 0; x < pokemon_array.length; x++) {

    if (pokemon_array[x][0] == pokedata['data'][i]['pokemonId']) {
        pokemon_name = pokemon_array[x][2];
    }
    }

    pokemon_up = pokedata['data'][i]['upvotes'];
    pokemon_down = pokedata['data'][i]['downvotes'];
    pokemon_lat = pokedata['data'][i]['latitude'];
    pokemon_long = pokedata['data'][i]['longitude'];

    if (pokemon_down >= pokemon_up) {

    }
    else {
    //markers_data.push([pokemon_id, pokemon_img, pokemon_name ]);
    markers.push([pokemon_name, pokemon_lat, pokemon_long ]);
    }
    }

    // Info Window Content

    var nowTime = Date.now();

    for (var i = 0; i < pokedata['data'].length; i++) {
    for (var x = 0; x < pokemon_array.length; x++) {
    if (pokemon_array[x][0] == pokedata['data'][i]['pokemonId']) {
        pokemon_name = pokemon_array[x][2];
    }
    }

    pokemon_up = pokedata['data'][i]['upvotes'];
    pokemon_down = pokedata['data'][i]['downvotes'];
    pokemon_created = 1e3 * pokedata['data'][i]['created'],
    p = pokemon_created + 900000 - nowTime;

    hour_data = parseInt(p / 6e4 % 60),
    sec_data = parseInt(p / 1e3 % 60);

    if (hour_data.toString().length == 1) {
            hour_data = "0" + hour_data;
    }

    if (sec_data.toString().length == 1) {
            sec_data = "0" + sec_data;
    }

    pokemon_trainer_name = pokedata['data'][i]['trainerName'];

    pokemon_time_expire = hour_data + ":" + sec_data;

    text_write = "<h3>"+pokemon_name+"</h3><br>Source:"+pokemon_trainer_name+" <br><br>Time expire: <span id='expire_"+i+"'>"+pokemon_time_expire+"</span>";

    if (pokemon_down >= pokemon_up) {

    }
    else {
    infoWindowContent.push([text_write]);
    text_write = "";
    }
    }

     var pokeImage = [];

    for (var i = 0; i < pokedata['data'].length; i++) {
    for (var x = 0; x < pokemon_array.length; x++) {
    if (pokemon_array[x][0] == pokedata['data'][i]['pokemonId']) {
        pokemon_img = pokemon_array[x][1];
    }
    }

    pokemon_up = pokedata['data'][i]['upvotes'];
    pokemon_down = pokedata['data'][i]['downvotes'];

    if (pokemon_down >= pokemon_up) {

    }
    else {
    pokeImage.push([pokemon_img]);
    }
    }

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: pokeImage[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(16);
        google.maps.event.removeListener(boundsListener);
    });

     }
     });

}

var pokemon_name=”“；
var pokemon_数组=[]；
var infoWindowContent=[]；
var标记=[]；
var pokeImage=[]；
var标记_数据=[]；
var infos_数据=[]；
var icon_data=“”；
jQuery（函数（$）{
//异步加载映射API
//callAPI（）；
var script=document.createElement（'script'）；
script.src=“//maps.googleapis.com/maps/api/js？key=KEYHERE&callback=callAPI”；
document.body.appendChild（脚本）；
});
函数callAPI（）{
$.ajax({
键入：“POST”，
url:'getpoke.php'，
数据类型：“json”，
数据：$（“#刷新表单”）.serialize（），
cache:false，
contentType:false，
processData:false，
成功：功能（数据）{
bounds=新的google.maps.LatLngBounds（）；
映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
初始化（数据）；
}
});
}
setInterval（函数（）{callAPI（）；}，10000）；
函数deleteMarkets（）{
标记=[]；
infoWindowContent=[]；
博凯梅格=[]
}
函数初始化（数据）{
删除标记（）；
var pokedata=$.parseJSON（数据）；
$.ajax({
url:“pokemonlist.txt”，
数据类型：“文本”，
成功：功能（数据）{
变量行=data.split（'\n'）；
for（变量i=0；i=pokemon\u up）{
}
否则{
//markers_data.push（[pokemon_id，pokemon_img，pokemon_name]）；
markers.push（[pokemon_name，pokemon_lat，pokemon_long]）；
}
}
//信息窗口内容
var nowTime=Date.now（）；
对于（var i=0；i来源：“+pokemon_trainer_name+”

时间到期：“+pokemon_Time_expire+”；
如果（口袋妖怪向下>=口袋妖怪向上）{
}
否则{
infoWindowContent.push（[text_write]）；
text_write=“”；
}
}
var pokeImage=[]；
对于（var i=0；i=口袋妖怪向上）{
}
否则{
pokeImage.push（[pokemon_img]）；
}
}
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i

那代码相当混乱。我不确定它是否解决了所有问题，但我可以看出主要问题在哪里

第一：变量边界必须在函数初始化内部

剩下的，试试这个；用我的函数替换callAPI（）。我想如果你的代码没有引起错误，这应该可以解决你的问题

var firstTimeLoaded = false;
// load the markers (from server)
function callAPI() {
  $.ajax({
    type: 'POST',
    url: 'getpoke.php',
    dataType: 'json',
    data: $("#refresh_form").serialize(),
    cache: false,
    contentType: false,
    processData: false,
    success:function(data) {
      // Display a map on the page.  Obviously this needs to be done only once.
      if(firstTimeLoaded == false) {
        firstTimeLoaded = true;
        mapOptions = {
          mapTypeId: 'roadmap'
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);
      }
      initialize(data);
    }
  });
}
// this means the function callAPI() will be called, every 10 seconds.
setInterval(function(){callAPI();}, 10000);

---

将callAPI（）从setInterval中取出，使其只调用一次。然后，改为在setInterval中调用initialize（）。

请提供一个示例来说明您的问题W感谢并为混乱的代码感到抱歉！实际上所有的错误都是因为变量边界？好吧，代码在边界处停止；Javascript在其作用域中没有变量边界（变量未在同一函数中声明）；所以javascript只是停止执行函数的其余部分。我同意。我选择了稍微不同的方法来解决这个问题，出于实际目的，主要是为了根据需要尽可能少地进行更改

function initialize(data) {
  bounds = new google.maps.LatLngBounds();
  ...
}