javascript - 谷歌地图/gmap3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助

标签 javascript jquery google-maps jquery-plugins jquery-gmap3

我正在尝试编写一个脚本来获取用户的地理位置 - 如果他们启用了它,并绘制到预定义目的地的路线。如果他们没有启用地理定位,它应该只绘制预定义的位置。该脚本不起作用,但您应该能够通过查看代码很好地了解我正在尝试做什么。我走在正确的轨道上吗?谁能找出为什么它不起作用吗?

<script type="text/javascript">
       $(function (){

        var dest = "Unit 20, Tallaght Business Centre, Whitestown Road, Tallaght Business Park, Ireland";

        if(geolocEnabled()){
            getLocation();
        }else{
            plotMarker(dest);
        }

        //check if geolocation enabled
        function geolocEnabled(){
            return navigator.geolocation;
        }

        //plot marker for VRF office
        function plotMarker(dest){
            $('#map').gmap3(
              { action: 'addMarker',
                address: dest,
                map:{
                  center: true,
                  zoom: 14
                },
                marker:{
                  options:{
                    draggable: false
                  }
                }
              }
            );
        }

        //get user's location
        function getLocation(){
            $('#map').gmap3(
            { action : 'geoLatLng',
              callback : function(latLng){
                if (latLng){
                  plotRoute(latLng, dest);  
                  return;
                } else {
                  alert("Unable to determine your location. Enable geolocation services and try again, or consult the map for our location.");
                  plotMarker(dest);
                }
              }
            });
          }

        //plot route
        function plotRoute(latLng, dest){
        $('#map').gmap3(
          { action:'getRoute',
            options:{
              origin: latLng,
              destination: dest,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
            },
            callback: function(results){
              if (!results) return;
              $(this).gmap3(
                { action:'init', 
                  zoom: 7, 
                  mapTypeId: google.maps.MapTypeId.ROADMAP, 
                  streetViewControl: true,
                  center: [53.337433,-6.2661]
                },
                { action:'addDirectionsRenderer',
                  panelID: 'directions-panel',
                  options:{
                    preserveViewport: true,
                    draggable: false,
                    directions:results
                  }
                }
              );
            }
          }
        );
      }

    });
    </script>

非常感谢所有帮助。

编辑:当我运行脚本时,我什至没有在浏览器中收到地理位置警告。

编辑:我从 getLocation 中删除了 {timeout: 10000},现在正在进入警报。脚本已更新。

最佳答案

地理定位是一个异步过程,当getLocation()完成时,结果将不可用。

$.gmap3.geoLatLng的回调中调用plotRoute()并提供预期的参数(latLng, dest)

关于javascript - 谷歌地图/gmap3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12004744/

相关文章:

c# - 使用 Jquery Ajax 将模型和 2 个复选框列表发布到 Controller

javascript - 无法在 .text() 内实现换行符 -\n 不起作用

api - map - 最安全的路线

javascript - 使用 Google Maps API 从邮政编码获取城市,然后将其写入 JSON?

javascript - VueJS 异步组件数据和 promise

javascript - 如何对 JavaScript JQuery 函数中使用的变量进行串联

javascript - 不允许用户输入大于 12 的数字

javascript - Node.js Mongoose 是否允许您通过用户/密码连接到数据库?

javascript - 如何将数据从链接传递到 jQuery 函数?

android - Google map View 无法在模拟器上显示