javascript - 经纬度和 GeolocationMarker 之间的 Google map API DirectionsService

Question

我正在尝试让路线服务在 google maps api v3 上运行。这是一个用于智能手机的网络应用程序，用户可以在其中获取从他们所在的位置 (GeolocationMarker) 到由纬度和经度定义的静态(硬编码)位置的方向。 map 以硬编码的纬度和经度为中心，然后我有一个图标 (gps.png)，onclick 应该计算并绘制两点之间的方向。我不太擅长 javascript，这本质上是代码的混搭...任何人都可以看到我做错了什么以及为什么这行不通吗？

Javascript 是:

<code>
    var map, GeoMarker;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var arena = new google.maps.LatLng(43.684782688659126,-79.2992136269837);
        var mapOptions = {
        zoom: 12,
        center: arena,
        panControl: false,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        directionsDisplay.setMap(map);
        var marker1 = new MarkerWithLabel({
        position: arena,
        draggable: false,
        raiseOnDrag: false,
        map: map,
        icon: "images/lax-pin1.png",
        labelContent: "Ted Reeve Arena",
        labelAnchor: new google.maps.Point(25, 0),
        labelClass: "pin", // the CSS class for the label
        labelStyle: {opacity: 0.95}
        });
        GeoMarker = new GeolocationMarker();
          GeoMarker.setCircleOptions({fillColor: '#808080'});
         google.maps.event.addListenerOnce(GeoMarker, 'position_changed',                  function(e) {
         map.setCenter(e.latLng);
         map.fitBounds(e.latLngBounds);
         });
         google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
         alert('There was an error obtaining your position. Message: ' + e.message); 
         });
         GeoMarker.setMap(map);
         }   
        function calcRoute() {
        var request = {
            origin: GeoMarker,
            destination: marker1,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
        }
        });
    }
         google.maps.event.addDomListener(window, 'load', initialize);      

</code>

html是calcRoute函数的onclick div标签感谢您的帮助....

Answer 1

报错:

TypeError: e is undefined

对于行

map.setCenter(e.latLng);

事件监听器

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
    map.setCenter(e.latLng);
    map.fitBounds(e.latLngBounds);
});

应该改为

google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
    //map.setCenter(e.latLng);
    //map.fitBounds(e.latLngBounds);
    map.setCenter(GeoMarker.getPosition());
    map.fitBounds(GeoMarker.getBounds());
});

request 应该改为:

var request = {
    origin: GeoMarker.getPosition(),
    destination: marker1.getPosition(),
    travelMode: google.maps.TravelMode.DRIVING
};

因为起点/终点需要字符串或有效的 LatLng

更新:我忘记了这个更改:marker1 必须更改为全局:

var map, GeoMarker;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var marker1;