当前位置: 首页 > 知识库问答 >
问题:

使用Google directions API的动态路由

郑曜灿
2023-03-14

最初我在地图上有两个点。其中一个是起点,另一个是目的地。

起点是可拖动的,而终点是固定的。

在页面加载后第一次绘制地图时,原点有一些默认值,而终点从数据库中获取值。初始加载工作正常。我能画出起点和终点之间的路线。

我用下面的函数在地图上画方向

function calcRoute() {
  var request = {
      origin:myLatLng1,
      destination:myLatLng,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

现在我有了一个事件监听器,每当我的原始标记被拖动时,它就会得到原始标记的新位置的新latlong,然后我调用上面相同的函数来获得新的路由。

function togglePos(){
    myLatLng1 = new google.maps.LatLng(marker1.getPosition());
    calcRoute();
}

这就是我面临的问题,我无法在新标记的起点和相同的旧目的地之间重新绘制新路线。如果有人需要,这是我的初始化函数。

function initialize() {
    var mapOptions = {
        zoom: 13,
        center: myLatLng
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    directionsDisplay.setMap(map);

    var image = 'myimage.png';

    marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
    });
    marker1 = new google.maps.Marker({
          position: myLatLng1,
          map: map,
          draggable: true
    });
    google.maps.event.addListener(marker1, 'dragend', togglePos);

    calcRoute();
}

我没有得到任何javascript错误。我正在构建这样的东西。
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

但我不是从下拉框中选择它,而是在移动标记时调用函数

小提琴链接:http://jsfiddle.net/FvqAL/4/但我不知道为什么它不在小提琴上工作:|

共有1个答案

经和歌
2023-03-14

我在calc路线做了一些改变,现在每当它被调用时,它就会得到mark er1位置并通过它绘制路线。

function calcRoute() {
  var request = {
      origin:marker1.getPosition(),
      destination:myLatLng,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

这是最后一把小提琴,如果你想看看的话。谢谢你的帮助:)

 类似资料:
  • 问题内容: 我有一个如下所示的route.js: 考虑到我要创建200多种不同的路线,最终我会遇到诸如“ article1”,“ article2”等内容 而我的app.js就像: 有没有动态的方式来创建这个? 问题答案: 终于成功了。 在我遇到的情况下,第1条,第2条等: 在获得多级网址的情况下,我创建了一个自定义函数:

  • 问题内容: 我目前有一个内置路由的AngularJS应用程序。它可以正常工作,并且一切正常。 我的app.js文件如下所示: 我的应用程序内置了CMS,您可以在其中复制 / pages 目录中的新html文件并添加新的html文件。 即使对于新动态添加的文件,我仍然希望通过路由提供程序。 在理想的情况下,路由模式为: $ routeProvider.when(’/ pagename ‘,{temp

  • React Router 适用于小型网站,比如 React.js Training,也可以支持 Facebook 和 Twitter 这类大型网站。 对于大型应用来说,一个首当其冲的问题就是所需加载的 JavaScript 的大小。程序应当只加载当前渲染页所需的 JavaScript。有些开发者将这种方式称之为“代码分拆” —— 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。 对于底层细节

  • 我正在创建一个由3个(服务a、服务B和服务C)微服务组成的示例。所有3项服务以及网关服务(zuul)都在eureka注册。我的用例是: 1) 所有请求都将通过网关服务进入系统——正常工作 2) 对于每个针对服务C的请求,网关服务应该首先调用服务A来执行某些操作。当服务A做出肯定响应时,请求应该被转发到服务B。一旦服务A和服务B都做出肯定响应,请求最终应该被转发到服务C。 我想使用zuul路由过滤器

  • 问题内容: 我想像通常那样处理静态文件,但像通常那样处理动态路由 其中一位开发人员在此评论中提出了解决方案,但我不清楚他的意思。 问题答案: 好的。我在Express的response object 的源代码中找到了一个示例。这是该示例的稍作修改的版本。 它使用该方法。 注意 :安全性更改要求使用此选项。

  • 本文向大家介绍静态路由和动态路由之间的区别,包括了静态路由和动态路由之间的区别的使用技巧和注意事项,需要的朋友参考一下 静态路由 遵循用户定义的路由的静态路由或非自适应路由,并且直到网络管理员更改路由表后,路由表才会更改。静态路由使用简单的路由算法,并且比动态路由提供更高的安全性。 动态路由 顾名思义,动态路由或自适应路由会在网络发生任何更改或网络拓扑发生更改时更改路由表。在网络更改期间,动态路由