我目前也尝试过：

Question

我的地图完美地显示了固定标记，以及用户共享位置的标记。但是现在当我添加directionsDisplay和directionsService变量以及其他一些代码时，地图根本没有加载，我得到了一个控制台错误，“谷歌没有定义”＃。

下面我将发布我的工作代码，并且我会注释我添加的所有新行，以便您可以分辨哪些。

如果我注释掉这些行（如下所示），那么地图就可以正常工作并显示控制台错误directionsDisplay未定义，这显然是我所期待的，但是当我在google中添加这些行时，我讨厌我。

我目前也尝试过：

从api密钥中删除异步延迟
使用隐身模式和隐私浏览功能在Chrome和FF中进行测试

修改

感谢@Jaromanda X，他注意到在调用initMap函数之前谷歌不会被识别，因此我将变量移动到calcRoute函数，因为它无论如何都不需要全局。

我会更新代码，请注意，这个不幸的方法并没有使路线正确计算，仍然在努力：/

HTML：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=my key is here&callback=initMap"></script>

JS：

var directionsDisplay;

var map;


var markers = [];


var initMap = function() {
    directionsDisplay = new google.maps.DirectionsRenderer();
  var chesters = new google.maps.LatLng(52.19147365, -2.21880075);

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: chesters
  });

  var marker = new google.maps.Marker({
    position: chesters,
    title: 'Chesters Restaurant',
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map
  });


  markers.push(marker);
  directionsDisplay.setMap(map);

}


var showPosition = function(position) {
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var marker = new google.maps.Marker({
    position: userLatLng,
    title: 'Your Location',
    draggable: true,
    map: map
  });


  markers.push(marker);


  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
  }


  map.fitBounds(bounds);

    calcRoute(userLatLng);
}

function calcRoute(userLatLng) {
var directionsService = new google.maps.DirectionsService();
    var start = new google.maps.LatLng(userLatLng.lat, userLatLng.long),
        end = new google.maps.LatLng(52.19147365, -2.21880075);

    /*bounds.extend(start);
    bounds.extend(end);
    map.fitBounds(bounds);*/

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function (response, status) {
        if (status == 'OK') {
            directionsDisplay.setDirections(result);
        }

    });
}

function errorHandler(error) {
  console.log('Geolocation error : code ' + error.code + ' - ' + error.message);
}

navigator.geolocation.getCurrentPosition(showPosition, errorHandler, {
  enableHighAccuracy: false,
  maximumAge: 60000,
  timeout: 27000
});

Answer 1

您是否启用了Google地图指示API？ https://developers.google.com/maps/documentation/javascript/directions

我会发表评论但显然不能在50rep之前这样做。

＆＃39; Google未定义＆＃39;当我添加directionsDisplay和Service

我目前也尝试过：

修改

1 个答案: