尝试从地图中删除标记 [英] Trying to remove markers from map
本文介绍了尝试从地图中删除标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里查看了所有内容，当点击获取路线时，似乎无法找到任何可用于删除标记的内容。已经去了谷歌的开发者的网站，并阅读并尝试他们所做的只是无法让事情工作。我有一个var crt = [];在顶部。这是我拥有的所有代码。你可以看到我在deleteMarkers和clearMarkers函数中尝试了什么。失去了，一直试图超过4个小时拉什么我已经出去的头发......大声笑
I have looked all over on here and can't seem to find anything that works on removing markers when I click on get directions. Have gone to google's developer's site and read and tried what they did just couldn't get things to work.I have a var crt =[]; at top. Here is all the code I have. You can see what I have tried in the deleteMarkers and clearMarkers function. Lost, been trying things for over 4 hours about to pull what hair I have out...lol
Javascript代码：
Javascript code:
<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代码：
CSS code if needed:
<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>
推荐答案
有一个错误报告：
Uncaught TypeError: Cannot read property 'length' of undefined
换行
for line
for (var i = 0; i < locations.length; i++) {
来自函数 setMarkers（map，locations）从
function clearMarkers() {
setMarkers(null);
}
您必须提供位置参数或遍历 crt 数组并调用 setMap（null）。
You have to provide locations argument or iterate over crt array and call setMap(null).
更新：一个可能的解决方案是 - 如果map为 null 从 crt < code $：
Update: One possible solution is - if map is null clear all markers from 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 = {
...
这篇关于尝试从地图中删除标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
