我尝试添加点击事件时,当我点击地图上的某个位置时,它会获得用户的位置,然后他们点击标记并计算路线并显示距离。 这是我目前为止的代码,目的是在用户点击
时添加标记map.addListener('click', function(e) { //allows user to place a marker upon
a click
placeMarker(e.latLng, map);
});
var marker;
function placeMarker(location, map) { //current location marker function,
for direction service origin
if (marker) {
marker.setPosition(location);
} else {
var icon = { //custom icon for the current location marker
url: 'https://cdn2.iconfinder.com/data/icons/snipicons/500/map-
marker-128.png',
scaledSize: new google.maps.Size(45, 45)
};
marker = new google.maps.Marker({
position: location,
map: map,
icon: icon,
animation: google.maps.Animation.DROP
});
}
//place location for direction service
lat3 = marker.getPosition().lat();
lng3 = marker.getPosition().lng();
map.setCenter(location);
clickWindow(false, infowindow, map.getCenter(), map);
marker.addListener('mouseover', function () { //mouseover to remind user
of current location
//resultsMap.setCenter(marker);
infowindow.open(map, this);
infowindow.setContent("Current Location");
});
marker.addListener('mouseout', function () {
infowindow.close(map, marker);
});
}
function clickWindow(input, infowindow, location, map) { //called when
current location marker is placed
infowindow.setContent("Location Set");
infowindow.setPosition(location);
infowindow.open(map);
}
}
但是我的地图现在根本不再加载了,为什么会出现这种情况有什么建议?感谢
答案 0 :(得分:2)
这是一个解决方案;我已经包含了一些注释来解释代码的某些部分:
let map;
let currentLocationMarker;
// Random markers that act as points of destination
let markerPositions = [
{lat: 30.326595, lng: -97.726331},
{lat: 30.388733, lng: -97.745052},
{lat: 30.378010, lng: -97.676278},
{lat: 30.290691, lng: -97.772070}
];
let directionsService;
let directionsDisplay;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 30.326595, lng: -97.726331},
zoom: 12
});
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
addMarkers(markerPositions);
map.addListener('click', setCurrentLocation);
}
// Add a marker when the user clicks on the map
function setCurrentLocation(e) {
// If there is no marker, create one
if (!currentLocationMarker) {
currentLocationMarker = new google.maps.Marker({
position: e.latLng,
map: map,
label: 'Me'
});
// Otherwise, update its position
} else {
currentLocationMarker.setPosition(e.latLng);
}
}
// Add the markers that act as random destination points
function addMarkers(positions) {
positions.forEach(position => {
let marker = new google.maps.Marker({
position: position,
map: map
})
// Set a click listener to each destination marker
marker.addListener('click', () => getRoute(position));
})
}
// Gets the route between the user generated marker and the random marker that was clicked
function getRoute(position) {
if (!currentLocationMarker) return alert('Click on the map to set your location first.')
directionsService.route({
origin: currentLocationMarker.position,
destination: position,
travelMode: 'DRIVING'
}, (result, status) => {
if (status !== 'OK') return alert(`Error: ${status}`);
directionsDisplay.setDirections(result);
});
}
这是一个JSBin,其中有一个工作示例。