谷歌在经纬度和 GeolocationMarker 之间映射 API DirectionsService答案

【问题标题】：Google maps API DirectionsService between lat and long and GeolocationMarker谷歌在经纬度和 GeolocationMarker 之间映射 API DirectionsService
【发布时间】：2014-04-06 20:18:04
【问题描述】：

我正在尝试获取在 google maps api v3 上运行的路线服务。这是一个用于智能手机的网络应用程序，用户可以在其中获取从他们所在的位置（GeolocationMarker）到由纬度和经度定义的静态（硬编码）位置的路线。地图以硬编码的纬度和经度为中心，然后我有一个图标 (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 标签感谢您的帮助....

【问题讨论】：

标签： javascript android html ios google-maps

【解决方案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
};

因为 origin/destination 需要字符串或有效的 LatLng

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

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

【讨论】：

我已经尝试过你的建议，但还是不行……点击图片时什么也没有发生……
点击有效，我用 alert('Hello');紧接在“var 请求”之前
好的，我让它工作了，但不漂亮。这就是我所做的code function calcRoute() { var arena1 = new google.maps.LatLng(43.684782688659126,-79.2992136269837); var request = { 来源：GeoMarker.getPosition()，目的地：arena1，travelMode：google.maps.TravelMode.DRIVING }; directionService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) {方向Display.setDirections(result); } }); code
抱歉，没用……我的 JS 不太强，所以可能是别的原因。再次添加变量，虽然不是最好的方法，但它起作用了。我不知道控制台日志是什么……我完全是自学成才并使用 Notepad++ 作为我的开发工具。我只是在 iphone 上编码和刷新....任何建议都会被很好地接受...完全是 windows 开发平台，没有 Mac（还）

【解决方案2】：

好的，我让它工作了，但不漂亮。这就是我所做的函数计算路由（）{ var arena1 = new google.maps.LatLng(43.684782688659126,-79.2992136269837); 变种请求 = { 来源：GeoMarker.getPosition()，目的地：arena1， travelMode：google.maps.TravelMode.DRIVING }; 方向Service.route（请求，功能（结果，状态）{ 如果（状态 == google.maps.DirectionsStatus.OK）{ 方向显示.setDirections（结果）； } });

【讨论】：