谷歌地图方向出现两次

Google Maps Directions Appearing Twice?

本文关键字：两次 方向 谷歌地图      更新时间：2023-09-26

我正在尝试创建一个页面，加载后将显示用户在谷歌地图上的当前位置。还将有各种可能目的地的选择列表。当选择列表更改时，地图将显示从当前位置到目的地的路线。到目前为止一切都很好！

哪里出了问题是当我试图添加驾驶方向。出于某种原因，它们出现了两次，但我不明白为什么。这是代码：

var latitude = 0;
var longitude = 0;
$( document ).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(initMap);
    } else {
        document.getElementById("feedback").innerHTML = "Geolocation is not supported by this browser.";
    }
});
function initMap(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    latlong = latitude + "," + longitude;
    var myCentre = new google.maps.LatLng(latitude,longitude);
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {lat: latitude, lng: longitude},
        mapTypeId:google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: myCentre,
        title: 'Your current position'
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dirs'));        
    marker.setMap(map);
    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay, myCentre, marker);
    };
    document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, myStart, marker) {
    marker.setMap(null);
    directionsService.route({
        origin: myStart,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

我猜这与线路有关：

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dirs'));

但我真的看不出是什么。谷歌网站上的例子(https://developers.google.com/maps/documentation/javascript/examples/directions-panel)有两条非常相似的线，但没有给出相同的问题。很明显，我不必要地多次打电话给某个东西，但怎么了？

感谢

onChange处理程序被激发两次，因为它在initMap函数内部。当移动到initMap函数之外（以及所有参数的变量）时，它按预期工作。所以，现在的代码是：

var latitude = 0;
var longitude = 0;
$( document ).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(initMap);
    } else {
        document.getElementById("feedback").innerHTML = "Geolocation is not supported by this browser.";
    }
});
var directionService = "";
var DirectionsRenderer = "";
var myCentre = "";
var marker = "";
function initMap(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    latlong = latitude + "," + longitude;
    myCentre = new google.maps.LatLng(latitude,longitude);
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {lat: latitude, lng: longitude},
        mapTypeId:google.maps.MapTypeId.ROADMAP
    });
    marker = new google.maps.Marker({
        position: myCentre,
        title: 'Your current position'
    });
    directionsDisplay.setMap(map);
    var panel = document.getElementById('dirs');
    directionsDisplay.setPanel(panel);      
    marker.setMap(map);
    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);


}
var onChangeHandler = function() {
    var end = document.getElementById('end').value;
    calculateAndDisplayRoute(directionsService, directionsDisplay, myCentre, marker, end);
};
document.getElementById('end').addEventListener('change', onChangeHandler);
function calculateAndDisplayRoute(directionsService, directionsDisplay, myStart, marker, end) {
    marker.setMap(null);
    directionsService.route({
        origin: myStart,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

感觉还是有点像一个拼凑的东西，但我应该能把它整理一下。

相关文章：