2014-02-09 216 views
0

我已經在這裏查看了所有內容,並且在單擊獲取路線時似乎無法找到任何可用於刪除標記的內容。已經去了谷歌的開發者的網站,並閱讀並嘗試他們所做的只是無法讓事情工作。我有一個var crt = [];在頂部。這是我擁有的所有代碼。你可以看到我在deleteMarkers和clearMarkers函數中嘗試了什麼。失落,一直試圖要拉我有什麼頭髮了4小時以上的東西...笑試圖從地圖中刪除標記

Javascript代碼:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

<script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var crt=[]; 

function initialize() { 
directionsDisplay = new google.maps.DirectionsRenderer(); 
var mapOptions = { 
zoom: 8, 
center: new google.maps.LatLng(39.05440, -95.97300), 
mapTypeControl: true, 
mapTypeControlOptions: { 
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
}, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.SMALL 
} 
}; 

var map = new google.maps.Map(document.getElementById("map-canvas"), 
    mapOptions); 
directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById("directions-panel")); 
setMarkers(map, courts); 
} 

var courts = [ 
['Atchison County', 39.565383, -95.119096, 1], 
['Coffey County', 38.194560, -95.741681, 2], 
['Dickinson County', 38.915997, -97.213389, 3], 
['Douglas County', 38.963314, -95.234417, 4], 
['Franklin County', 38.614233, -95.268593, 5], 
['Geary County', 39.030365, -96.828725, 6], 
['Jackson County', 39.464102, -95.735495, 7], 
['Jefferson County', 39.216026, -95.313719, 8], 
['Lyon County', 38.403201, -96.179739, 9], 
['Miami County', 38.571520, -94.878053, 10], 
['Osage County', 38.610382, -95.683745, 11], 
['Pottawatomie County', 39.393895, -96.415523, 12], 
['Riley County', 39.179751, -96.562988, 13], 
['Shawnee County', 39.050214, -95.671396, 14], 
['Wabaunsee County', 39.011824, -96.291086, 15] 
]; 

function setMarkers(map, locations) { 

    var image = { 
    url: 'images/hammer.png', 

    size: new google.maps.Size(32, 32), 

    origin: new google.maps.Point(0,0), 

    anchor: new google.maps.Point(0, 32) 
    }; 
    var shape = { 
    coord: [1, 1, 1, 32, 30, 32, 30 , 1], 
    type: 'poly' 
}; 
for (var i = 0; i < locations.length; i++) { 
var court = locations[i]; 
var myLatLng = new google.maps.LatLng(court[1], court[2]); 
var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image, 
    shape: shape, 
    title: court[0], 
    zIndex: court[3] 
}); 
crt.push(marker); 
} 

} 


function clearMarkers() { 
setMarkers(null); 
} 


function deleteMarkers() { 
clearMarkers(); 
crt = []; 
} 


function calcRoute() { 
var selectedMode = document.getElementById("mode").value; 
var start = document.getElementById("start").value; 
var end = document.getElementById("end").value; 
var request = { 
origin: start, 
destination: end, 
travelMode: google.maps.TravelMode[selectedMode] 
}; 
directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
} 
}); 

} 

google.maps.event.addDomListener(window, "load", initialize); 


</script> 

<script type="text/javascript"> 
function printDiv(divName) { 
var printContents = document.getElementById(divName).innerHTML; 
var originalContents = document.body.innerHTML; 

document.body.innerHTML = printContents; 

window.print(); 

document.body.innerHTML = originalContents; 
} 
</script> 

HTML代碼:如果需要

<body> 
    <div id="site"> 

<div id="nav"> 
<b>Start Address: </b> 
<input id="start" type=text size="30" value=""/> 
<b>End Location: </b> 
<select id ="end" name="menu"> 
<option>Select Your Destanation</option> 
<option value="425 N. 5th St., Atchison, KS 66002">Atchison County</option> 
<option value="110 S. 6th St. Ste 102, Burlington, KS 66839">Coffey County</option> 
<option value="109 E. 1st St., Abilene, KS 67410">Dickinson County</option> 
<option value="111 E. 11th St., Lawrence, KS 66024">Douglas County</option> 
<option value="301 S. Main St., Ottawa, KS 66067">Franklin County</option> 
<option value="138 E. 8th St., Junction City, KS 66441">Geary County</option> 
<option value="400 New York St., Holton, KS 66436">Jackson County</option> 
<option value="300 Jefferson St., Oskaloosa, KS 66066">Jefferson County</option> 
<option value="430 Commercial St. Emporia, KS 66801">Lyon County</option> 
<option value="120 S. Pearl St., Paola, KS 66071">Miami County</option> 
<option value="717 Topeka Ave., Lyndon, KS 66451">Osage County</option> 
<option value="106 Main St., Westmoreland, KS 66549">Pottawatomie County</option> 
<option value="100 Courthouse Plaza, Manhattan, KS 66505">Riley County</option> 
<option value="200 SE 7th St., Topeka, KS 66603">Shawnee County</option> 
<option value="215 Kansas St., Alma, KS 66401">Wabaunsee County</option> 
</select><br /><br /> 

<input type="button" id="print" onclick="printDiv("directions-panel")" value="Print Directions" /> 

<b>Traveling By: </b> <select id="mode"> 
<option value="DRIVING">Car</option> 
<option value="WALKING">Walking</option> 
<option value="BICYCLING">Bicycle</option> 
<option value="TRANSIT">Transit</option> 
</select> 

<input onclick="calcRoute(), deleteMarkers();" type=button id= "directions" value="Get Directions"/> 

</div><br/> 


<div id="directions-panel"></div>     
<div id="map-canvas"></div> 

<br /><br /> 

</div> 
</body> 

CSS代碼:

<style> 
#directions-panel { 
    height: 500px; 
    float: right; 
    width: 225px; 
    margin-right:10px; 
    overflow: auto; 
    background-color:rgba(255,255,255,1); 
    font-size:14px; 
    color:rgba(255,0,0,1); 
    } 


    #map-canvas { 
    height: 500px; 
    width: 500px; 
    margin-left:10px; 
    padding: 0px; 
    } 

    #nav 
    { 
     text-align:center; 
     margin:auto; 
     padding:0px; 
     color:rgba(255,255,255,1); 
     padding: 20px 0px 20px 0px; 

    } 
    #end, #mode 
    { 
     cursor:pointer; 
    } 
    #directions 
    { 
     margin-left:40px; 
     cursor:pointer; 
    } 
    #print 
    { 
     margin-right:30px; 
     cursor:pointer; 
    } 

    #site 
    { 
     margin:auto; 
     width:750px; 
     height:auto; 
     background-color:rgba(0,0,0,1); 
    } 
    </style> 
+0

你必須要通過地圖對象的清晰刪除功能。 – Zeeshan

回答

0

有一個錯誤報告:

Uncaught TypeError: Cannot read property 'length' of undefined 

從功能setMarkers(map, locations)

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

這是從

function clearMarkers() { 
    setMarkers(null); 
} 

叫你必須提供locations參數或迭代crt陣列,並呼籲setMap(null)

更新:一個可行的辦法是 - 如果地圖null清楚crt所有標記:

function setMarkers(map, locations) { 

    if (map == null) { 
     console.log('set marker map to null: ' + crt.length); 
     for (var i = 0; i < crt.length; i++) { 
      crt[i].setMap(null); 
     } 
     return; 
    } 

    var image = { 
    ... 
+0

您添加的更新效果很好。謝謝。 – user1236784