在谷歌地图上添加点击标记以计算到标记的距离答案

【问题标题】：Adding on Click marker on Google Maps to calculate distance to marker在谷歌地图上添加点击标记以计算到标记的距离
【发布时间】：2018-04-30 17:14:22
【问题描述】：

我试图添加一个点击事件，当我点击地图上的某个地方时，它会获取用户的位置，然后他们点击一个标记，它会计算路线并显示距离。到目前为止，这是我的代码，旨在在用户点击时将标记添加到地图

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);

}

}

但是我的地图现在根本不再加载，有什么建议为什么会发生这种情况？谢谢

【问题讨论】：

那么，当用户点击地图时，要显示用户当前位置和点击地点之间的路线？
我在地图上已经有标记了，所以当他们点击地图时，我想将其作为他们的“当前位置”，然后他们可以点击一个标记，它会显示从他们到该标记的路线'当前位置' @lavor

标签： javascript google-maps google-maps-api-3

【解决方案1】：

这是一种解决方案；我已经包含了一些 cmets 来解释代码的某些部分：

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 的工作示例。

【讨论】：