Google地图清除特定标记帮助（JS）

Question

我试图使用Firebase和Google地图API的组合来在地图上创建交互式标记。

我可以生成标记，但我想找到一种方法来删除它们。

我生成一个地址列表，包含一个按钮，你可以脓。如果推送，按钮通过将setMap设置为空来移除标记。

然而，在clearItem功能指引我的标记时，它给EMS错误“无法引用的未定义的setMap”

任何帮助吗？

我使用了一个数组，例如

var markerArray = [];

firebase.database().ref().on('value', function(snapshot) 
{ 
    var pointerLocations = document.getElementById("locations"); 
    var databaseKeys = snapshot.val(); //Returns one object of many object attributes 

    var list=""; 

    if(databaseKeys == null){ 
     console.log("Error handled"); 
    } 

    else{ 

     for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){ 
      list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>"; 
      list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>"; 
      var keyString = Object.keys(databaseKeys)[i].toString(); 
      list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>" 
      //Calls google map 

      codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, map,i); 

     } 
    } 
    pointerLocations.innerHTML = list; 
} 
); 


function codeAddress(address,mapGlobl,i) { 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 

     if (status == 'OK') { 
     // map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     markers.push(marker); 



     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 


function clearItem(databaseID,position){ 
    firebase.database().ref(databaseID).remove(); 
    markers[i].setMap(null); 
} 

EDIT：响应评论

使用变量i，而不是使用阵列

firebase.database().ref().on('value', function(snapshot) 
{ 
    var pointerLocations = document.getElementById("locations"); 
    var databaseKeys = snapshot.val(); //Returns one object of many object attributes 

    var list=""; 

    if(databaseKeys == null){ 
     console.log("Error handled"); 
    } 
    else{ 

     for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){ 
      list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>"; 
      list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>"; 
      var keyString = Object.keys(databaseKeys)[i].toString(); 
      list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>" 
      //Calls google map 

      codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, databaseKeys[Object.keys(databaseKeys)[i]].name, map,i); 

     } 
    } 
    pointerLocations.innerHTML = list; 
} 
); 

function codeAddress(address, name, mapGlobl,i) { 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 

     if (status == 'OK') { 
     // map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 

     latLongObj[i] = {lat : results[0].geometry.location.lat(), lng : results[0].geometry.location.lng(), add: address, name : name}; 

     console.log("Placing Market at " + i); 
     markers['marker'+i] = marker; 



     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 


function clearItem(databaseID,position){ 


    console.log(markers); 

    console.log("Removing at position: "+ position); 

    firebase.database().ref(databaseID).remove(); 

    markers['marker'+position].setMap(null); 

    delete markers['marker'+position]; 

    console.log(markers); 
} 

Answer 1

问题，其目的在于使geocoder.geocode()功能是异步的。从Google Maps JS文档：

由于Google Maps API需要调用外部服务器，因此访问地理编码服务是异步的。出于这个原因，你需要传递一个回调方法来在请求完成时执行。

您的markers.push(marker);发生在该回调函数内部。由于它是异步的，因此无法保证何时会被调用。 push()函数会天真地使用下一个可用的数组索引来将标记添加到数组，但是您正在根据函数调用之间传递的i值执行所有操作。如果Google Maps API发生任何问题，并且回调函数永远不会被调用，或者在延迟后被调用（例如，由于网络延迟），则可能会将事件添加到乱序或数组索引中的间隙中。

最简单的解决办法是改变markers.push(marker);到markers[i] = marker;这样可以保证它被添加到标记数组索引你希望（和它与<button>元素的i值相匹配）。