從谷歌地圖xml中刪除標記

-1

我試圖在定期刷新的谷歌地圖上顯示標記。從谷歌地圖xml中刪除標記

我發現這段代碼會將它們添加到地圖中，但我需要知道如何在每次刷新時刪除它們，以便它們不再在xml文件中時停止在地圖上顯示。

<script> 
var map = null; 

function initialize() { 
var mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(53.3478, -6.2597) //center over dublin 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
loadXMLFile(); 
} 

function loadXMLFile() { 
var filename = 'data.xml'; 
$.ajax({ 
    type: "GET", 
    url: filename, 
    dataType: "xml", 
    success: parseXML, 
    error: onXMLLoadFailed 
}); 

function onXMLLoadFailed() { 
    alert("An Error has occurred."); 
} 

function parseXML(xml) { 
    var bounds = new google.maps.LatLngBounds(); 
    $(xml).find("marker").each(function() { 
     //Read the name, address, latitude and longitude for each Marker 
     var nme = $(this).find('name').text(); 
     var address = $(this).find('address').text(); 
     var lat = $(this).find('lat').text(); 
     var lng = $(this).find('lng').text(); 
     var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); 
     bounds.extend(markerCoords); 
     var marker = new google.maps.Marker({ 
      position: markerCoords, 
      map: map 
     }); 
    }); 
    map.fitBounds(bounds); 
} 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
< /script>

當新的標記通過調用函數loadXMLFile（加入這個偉大的工程），但如果刪除它們，然後他們留在地圖上。我想我需要刪除它們https://developers.google.com/maps/documentation/javascript/examples/marker-remove但我不知道如何應用這個。

這讓我堅持了幾天。誰能幫我嗎？

編輯：

我的全代碼不渲染地圖：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
#map-canvas { 
    height: 400px; 
    margin-bottom: 10px; 
}  } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
var map; 
var markers = []; 

function initialize() { 

    var mapOptions = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(59.76522, 18.35002) 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    google.maps.event.addDomListener(document.getElementById('add-markers'), 'click', addMarkers); 
    google.maps.event.addDomListener(document.getElementById('remove-markers'), 'click', removeMarkers); 
} 

function addMarkers() { 

    var coords = [ 
    new google.maps.LatLng(59.32522, 18.07002), 
    new google.maps.LatLng(59.45522, 18.12002), 
    new google.maps.LatLng(59.86522, 18.35002), 
    new google.maps.LatLng(59.77522, 18.88002), 
    new google.maps.LatLng(59.36344, 18.36346), 
    new google.maps.LatLng(59.56562, 18.33002)]; 

    for (var i = 0; i < coords.length; i++) { 

     var marker = new google.maps.Marker({ 
      map: map, 
      position: coords[i] 
     }); 

     markers.push(marker); 
    } 
} 

function removeMarkers() { 

    for (var i = 0; i < markers.length; i++) { 

     markers[i].setMap(null); 
    } 
} 

initialize(); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
<button id="add-markers">Add markers</button> 
<button id="remove-markers">Remove markers</button> 
    </body> 
</html>

來源

2015-02-09 user2803146

1）創建一個數組來保存您的標記

var markers = [];

2）按每個標記的陣列當你將它們添加到地圖中時

var marker = new google.maps.Marker({ 
    position: markerCoords, 
    map: map 
}); 

markers.push(marker);

3）當你需要將其刪除，遍歷陣列，並且在每個標記

for (var i=0; i<markers.length; i++) { 

    markers[i].setMap(null); 
}

希望這有助於呼叫setMap(null)。

JSFiddle demo

編輯：

這裏是你的代碼與我的修改更新。我猜你定期調用loadXMLFile()函數（？）。

var map = null; 
var markers = []; 

function initialize() { 
    var mapOptions = { 
     zoom: 12, 
     center: new google.maps.LatLng(53.3478, -6.2597) //center over dublin 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    loadXMLFile(); 
} 

function loadXMLFile() { 

    for (var i = 0; i < markers.length; i++) { 

     markers[i].setMap(null); 
    } 

    var filename = 'data.xml'; 
    $.ajax({ 
     type: "GET", 
     url: filename, 
     dataType: "xml", 
     success: parseXML, 
     error: onXMLLoadFailed 
    }); 

    function onXMLLoadFailed() { 
     alert("An Error has occurred."); 
    } 

    function parseXML(xml) { 
     var bounds = new google.maps.LatLngBounds(); 
     $(xml).find("marker").each(function() { 
      //Read the name, address, latitude and longitude for each Marker 
      var nme = $(this).find('name').text(); 
      var address = $(this).find('address').text(); 
      var lat = $(this).find('lat').text(); 
      var lng = $(this).find('lng').text(); 
      var markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); 
      bounds.extend(markerCoords); 
      var marker = new google.maps.Marker({ 
       position: markerCoords, 
       map: map 
      }); 

      markers.push(marker); 
     }); 
     map.fitBounds(bounds); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize);

來源

2015-02-09 16:05:15 MrUpsidown

所以我可以看到，這是在jsfiddle上工作，但是當我嘗試把它放入頁面時，它不會渲染地圖。我使用提供的腳本替換了https://developers.google.com/maps/documentation/javascript/examples/map-simple上基本示例的javascript，但沒有喜悅。有任何想法嗎？ – user2803146 2015-02-09 17:03:18

用你所做的（添加代碼）編輯你的問題。 – MrUpsidown 2015-02-09 17:04:13

編輯。我正在等人指出我的傻菜鳥錯誤:) – user2803146 2015-02-09 17:06:36

從谷歌地圖xml中刪除標記

回答

相關問題