我已经在这里看了一遍,当我点击获取路线时,似乎找不到任何可以移除标记的东西。已经去了google的开发者网站并阅读并尝试了他们所做的事情,但无法让事情发挥作用。我有一个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 :(得分:0)
报告错误:
Uncaught TypeError: Cannot read property 'length' of undefined
换行
for (var i = 0; i < locations.length; i++) {
来自调用的函数setMarkers(map, locations)
的
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 = {
...