【问题标题】:Google Maps Api check if place is on the routeGoogle Maps Api 检查地点是否在路线上
【发布时间】:2014-01-25 08:02:03
【问题描述】:

我使用 Google 地图制作了两地之间的路线。效果很好。

但我也有一个数据库,其中包含不同道路上的有趣点 我的国家。我喜欢向他们展示他们是否在生成的路线上。有的地方 这条路线没有一条,不需要显示。

我的带有兴趣点的数据库包含纬度和经度坐标。

我如何检查他们是否在我的路线上?大约有 30 或 40 个有趣的 点在我的数据库中。

// set request
var request = {
    origin: initialLocation,
    destination: destination,               
    travelMode: google.maps.TravelMode.DRIVING
};

 // make route
directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

      // set route
      directionsDisplay.setDirections(response);


    }

});         

更新: 构建新功能“isLocationOnEdge”。但是当他们不在路上时,检查会运行标记:

// get flitsers on the route
function getFlitsersOnRoute(){

    // set request
    var request = {
        origin: current_location,
        destination: $('#gegevens').html(),               
        travelMode: google.maps.TravelMode.DRIVING
    };  

    // make route
    directionsService.route(request, function(response, status) {

        // isLocationOnEdge
        var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;      
        var coords = response.routes[0].overview_path;
        var image = base_url+'external/afbeeldingen/google_markers/flitser.png';

        // get flitsers
        $.ajax({
            type: "POST",
            async:false,
            url: base_url+"advies/get/9",
            success: function (data) {
                var result = jQuery.parseJSON(data);    

                // loop trough flitsers
                $.each(result.flitsers.m, function(i, item) {

                    // latitude longitude
                    var latlng = item["@attributes"].gps.split(",");

                    // make google latlng
                    var myLatlng = new google.maps.LatLng(latlng[0],latlng[1]);                     

                    if (myLatlng,coords)
                    {
                        // set and define the marker 
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            size: new google.maps.Size(15, 15),
                            icon: image,
                            title: 'Flitser'
                        });     
                    }

                });
            }
        });

    });
}

【问题讨论】:

  • 将有趣的地方添加到数组中。然后对于路线折线中的每个坐标,将其与感兴趣的地点数组进行检查。
  • How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API 的可能重复项,请使用您的数据库而不是场所 API。
  • 感谢 cmets!下面的答案是我猜你的答案的一个例子。
  • 你在哪里使用isLocationOnEdge?您的程序如何知道何时在行上放置标记?
  • 新的 google.maps.Marker 创建标记。 var 仅用于将标记存储在以后的体育场中。

标签: javascript google-maps


【解决方案1】:

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

要确定一个点是否落在折线上或附近,或者在多边形的边缘上或附近,请将点、折线/多边形以及可选的以度为单位的容差值传递给 google.maps.geometry.poly。 isLocationOnEdge()。如果该点与直线或边上最近点之间的距离在指定的容差范围内,则该函数返回 true。默认容差值为 10-9 度。

https://developers.google.com/maps/documentation/javascript/geometry

【讨论】:

    【解决方案2】:

    在您的 Google Maps API 请求中包含几何库:

    http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=TRUE_OR_FALSE

    伪代码:

    // Make isLocationOnEdge easier to access
    var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
    
    for (var i = 0; i < interestingPlaces.length; i++) {
        if (isLocationOnEdge(interestingPlaces[i],
                             response.routes[0].overview_path))
            {
                // Do something with interestingPlaces[i]
            }
    }
    

    Google maps documentation for isLocationOnEdge()

    【讨论】:

    • 感谢您的评论!这就是我要寻找的。我现在只收到一个错误。喜欢吗:myLatlng = new google.maps.LatLng(latlng[0],latlng[1]); if (isLocationOnEdge(myLatlng,response.routes[0].overview_path)) { } 错误:“TypeError:b.get 不是函数”
    • 没有更多代码很难说,但看起来new google.maps.LatLng(latlng[0], latlng[1]) 是你的问题。您似乎要发送两个 latLngs 来创建一个新的latLng。 API 需要两个数字。所以google.maps.LatLng(Number, Number)应该更好。
    • 我在我的问题中添加了一些代码。我的错误已解决,但脚本还没有工作。
    猜你喜欢
    • 1970-01-01
    • 2012-02-21
    • 1970-01-01
    • 2013-03-29
    • 2017-08-05
    • 1970-01-01
    • 2013-12-03
    • 1970-01-01
    • 2011-08-31
    相关资源
    最近更新 更多