Question

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

当我尝试添加行车路线时出错。出于某种原因，他们出现了两次，但我不明白为什么。这是代码：

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

但老实说我看不清楚。 Google网站（https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-match-query.html）上的示例有两条非常相似的行，但不会出现同样的问题。我显然不必要多次打电话，但是什么？

由于

Answer 1

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

仍然感觉像一个kludge，但我可以稍微整理一下。

谷歌地图方向出现两次？

1 个答案: