试图从地图中删除标记

时间:2014-02-09 06:43:52

标签: javascript google-maps-api-3

我已经在这里看了一遍,当我点击获取路线时,似乎找不到任何可以移除标记的东西。已经去了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>

1 个答案:

答案 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 = {
    ...