我想从Google地图上删除homeMarker,但是当我尝试执行删除功能时,它给了我这个错误:Uncaught TypeError:无法读取未定义的属性“ setMap”。我尝试了其他方法来取消它,但它总是给我这个错误。以下是我的JavaScript,可用来生成我的地图。
$(".selectBox").selectBox();
答案 0 :(得分:0)
错误在这里:
var homeMarker = addMarker({
coords: {
lat: lat,
lng: long
},
content: '<h3>Current Location</h3>'
});
addMarker
不返回任何内容,因此homeMarker
为空。
更改addMarker
函数以返回其创建的标记:
//Add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: props.iconImage
});
markers.push(marker);
marker.addListener('click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
marker.addListener('click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
map.addListener('click', function() {
map.setZoom(11);
})
//Check for customicon
if (props.iconImage) {
marker.setIcon(props.iconImage);
}
//Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
})
}
// return the marker
return marker; // <============================= add this line
}
代码段:
var markers = [];
var homeMarker;
function initMap() {
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var c = function(pos) {
pos = {
coords: {
latitude: 40.6975898,
longitude: -74.2631635
}
};
var lat = pos.coords.latitude,
long = pos.coords.longitude,
coords = lat + " , " + long;
var p1 = {
lat: 40.735657,
lng: -74.1723667
}
var p2 = {
lat: lat,
lng: long
}
var rad = function(x) {
return x * Math.PI / 180;
};
var getDistance = function(p1, p2) {
var R = 6378137; // Earth’s mean radius in meter
var dLat = rad(p2.lat - p1.lat);
var dLong = rad(p2.lng - p1.lng);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(p1.lat)) * Math.cos(rad(p2.lat)) *
Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = (parseFloat(R * c));
console.log(d);
return d; // returns the distance in meter
};
//Home marker
homeMarker = addMarker({
coords: {
lat: lat,
lng: long
},
content: '<h3>Current Location</h3>'
});
//Delivery van marker
var vanMarker = addMarker({
coords: {
lat: 40.735657,
lng: -74.1723667
},
iconImage: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content: '<h3>Delivery Van Location</h3><br><p>Delivery Van is ' + Math.round(getDistance(p1, p2)) + 'm Away from you.'
});
//Codes to move markers
function movingMarkers() {
homeMarker.setMap(null);
}
setInterval(function() {
movingMarkers();
}, 5000);
//Add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: props.iconImage
});
markers.push(marker);
marker.addListener('click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
marker.addListener('click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
map.addListener('click', function() {
map.setZoom(11);
})
//Check for customicon
if (props.iconImage) {
marker.setIcon(props.iconImage);
}
//Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
})
}
return marker;
}
}
var e = function(error) {
if (error.code === 1) {
alert('Unable to get location!');
c();
}
}
navigator.geolocation.getCurrentPosition(c, e);
//Map options
var options = {
zoom: 11,
center: {
lat: 40.735657,
lng: -74.1723667
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>