Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何计算给定点到最近的道路的距离?

如何计算给定点到最近的道路的距离?
EN

Stack Overflow用户
提问于 2014-06-16 06:31:35
回答 4查看 3.2K关注 0票数 1

目标:

计算给定点到最近道路的距离。我需要确定一个点是否落在路上。要做到这一点,我想看看从点到最近的路的距离。因此,距离为0意味着这点实际上是在一条道路上。

附加信息:

我不受谷歌地图的限制。如果Bing映射或其他映射服务提供此功能,则该服务也是一个考虑因素。

问题:

您知道如何用Google v3计算从给定点到最近的道路的距离吗?如果没有,你知道有其他方法或服务可以使我达到我的目标吗?

EN

回答 4

Stack Overflow用户

发布于 2014-06-18 02:54:01

问题解决了。下面是演示:http://jsfiddle.net/63sWv/

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var marker = null;
var roadMarker = null;
var geocoder = new google.maps.Geocoder();
var map;
var directionsService = new google.maps.DirectionsService();

$(document).ready(function(){

    var latlng = new google.maps.LatLng(54.97430382488778, -1.611546277999878);

    var mapOptions = {
        zoom: 22,
        center: latlng
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {       
        placeMarkers(event);
    });

});

function placeMarkers(e) {

    var markerImage = "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|FFFF00";    
    var roadMarkerImage ="https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin||FF0000|000000";

    if(marker !== null){
        marker.setMap(null);
    }

    marker = new google.maps.Marker({
        position: e.latLng,
        map: map,
        icon: markerImage
    });

    var request = {
        origin:e.latLng, 
        destination:e.latLng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };

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

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

            if(roadMarker !== null){
                roadMarker.setMap(null);    
            }

            roadMarker = new google.maps.Marker({
                position: response.routes[0].legs[0].start_location,
                map: map,
                icon: roadMarkerImage
            });         

            var distance = getDistance(request.origin,            
                            response.routes[0].legs[0].steps[0].end_point);

            $(".output .distance").html(distance);

        }
    });  
}

var rad = function(x) {
  return x * Math.PI / 180;
};

var getDistance = function(p1, p2) {

    //trim up to 5 decimal places because it is at that point where the difference
    p1.lat = parseFloat(p1.lat().toFixed(5));
    p1.lng = parseFloat(p1.lng().toFixed(5));

    p2.lat = parseFloat(p2.lat().toFixed(5));
    p2.lng = parseFloat(p2.lng().toFixed(5));

    var R = 6378137; // Earth’s mean radius in meter
    var dLat = rad(p2.lat - p1.lat);
    var dLong = rad(p2.lng - p1.lng);

    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(p1.lat)) * Math.cos(rad(p2.lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);

    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;

    return d; // returns the distance in meter

};
票数 8
EN

Stack Overflow用户

发布于 2016-08-08 03:30:56

另一种可能是利用谷歌的“道路管理API”:https://developers.google.com/maps/documentation/roads/snap

很简单,真的。你提供你的定位点,它返回最近的道路点,例如:key&path=60.170880,24.942795

它返回如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "snappedPoints": [
    {
      "location": {
        "latitude": 60.170877918672588,
        "longitude": 24.942699821922421
      },
      "originalIndex": 0,
      "placeId": "ChIJNX9BrM0LkkYRIM-cQg265e8"
    }
  ]
}
票数 2
EN

Stack Overflow用户

发布于 2014-06-16 08:17:15

我需要确定一个点是否落在路上。

我不相信有一种合法的方法可以用这些API来做你想做的事情。但是,您可能会使用Google的街景图像API或使用Google的StreetView对象进行更细粒度的控制,从而完成一些恶意的、不被推荐的技巧。

下面的想法是:--如果Street返回一个有效的结果(即全景街道视图图像),那么可能会将放在街道中。如果没有,那你就不是在街上了。

在用独立街景影像API识别“真”响应方面可能存在挑战。一种选择是比较失败响应就像这个的图像文件大小(内容长度为4868 )和测试点返回的图像文件大小,例如像这样有效的,它的内容长度为38701 ..any“真”响应将导致图像的内容长度值要高得多,因为图像中有实际数据。坦率地说,只要您请求相同大小的图像(即宽度和高度),故障的内容长度应该总是相同的。然而,API可能会稍微改变,并打破这一预期。所以这很危险。

实际Google API的街景对象提供的更高粒度的控件将为您提供更干净的处理,因为google.maps.StreetViewStatus将返回三个值之一并解决此情况:OKUNKNOWN_ERRORZERO_RESULTS,删除了使用前面描述的静态映像API所需的脆弱猜测工作。

但这种做法是肮脏的。首先,我认为街景不仅仅是街景。我在考虑公园里的小径,用户上传的全景图等等。其次,街景API似乎使用了“抓取”允许度(大概,50米)。换句话说,如果你的观点足够接近,它会给你带来的好处,并返回附近的街景全景无论如何。换句话说,要小心假阳性。

如果您正在考虑采用这种方法,下面是一个可以工作的端点示例:

http://maps.googleapis.com/maps/api/streetview?size=600x300&location=34.055526,-81.008087

这里有一个失败了..。

http://maps.googleapis.com/maps/api/streetview?size=600x300&location=34.05637,-81.00583

作为后记,如果您的应用程序的需求是由铸铁业务需求定义的,我不建议实际使用这种方法。但如果它只是为了娱乐和游戏,也许它足够近了?

如果你想认真对待这件事,你真的需要进入PostGRESql和它的PostGIS扩展,你需要一套非常详细的街道中心线。开放街道地图数据可以帮助您入门,但是请注意,数据的质量在某些地方是可变的( ..less ),而在其他地方则是可变的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24246056

复制
相关文章
jQuery scroll(滚动)延迟加载
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $(this).scrollTop(); //滚动条卷去高度 var windowHeight = $(this).height(); // 窗口高度 // console.log(scrollHeight, scrollTop, windowHeight) if(scrol
deepcc
2018/05/16
9K0
jQuery进阶,$.Deferred() 延迟对象
JS里面有大量的异步方法,写着写着,代码就会变得>>。多层嵌套的回调,很影响后续代码的维护,也许今天你还记得这块回调逻辑,明天你就很有可能被这回调姿势给坑了。
libo1106
2018/08/08
7970
延迟加载图片的jQuery插件-Lazy Load Plugin for JQuery
Lazy Load是一个用Javascript写得jQuery插件。它可以使一个长网页中,不在当前视图中的图片延迟加载,以提高页面的载入速度。
EltonZheng
2021/01/26
3.7K0
延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。
Denis
2023/04/15
1.9K0
如何做到 jQuery-free?
jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的
ruanyf
2018/04/12
1.3K0
如何做到 jQuery-free?
基于jQuery或Zepto的图片延迟加载插件
当我们网站的页面图片过多时,加载速度就会很慢。尤其是用手机2G/3G访问页面,不仅页面慢,而且还会用掉很多流量。我们主题之前也都采用了图片的懒加载形式,但都不完美,部分主题还采用了占位图片来控制懒加载,今天换一种js图片懒加载,它原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有图片在可视区域才去请求加载,这样的话应该就能满足我们日常所需,好了不说废话先按照教程操作试试,后期主题会逐一更新,稍安勿躁!!!
李洋博客
2022/11/03
3.2K0
使用jQuery的delay()延迟执行show()和hide()不起效的解决方法
今天使用 jQuery 的 delay() 来延迟执行 hide() ,发现延时不起效,查了一些资料,找到了其中的原因。
德顺
2019/11/12
3.3K0
响应式jquery瀑布流结合图片延迟加载特效
此作品是一款非常实用的jquery特效,结合了两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquery.lazyload,网站上分享过很多款瀑布流作品,可是很多网友们都觉得不是很懂,有点复杂,今天有空就把此作品整理了出来分享给大家学习用,如果作品有什么问题请多多反馈。。。
李维亮
2021/07/09
4.9K0
使用jQuery
jQuery概述 Write Less Do More(用更少的代码来完成更多的工作) 使用CSS选择器来查找元素(更简单更方便) 使用jQuery方法来操作元素(解决浏览器兼容性问题、应用于所有元素并施加多个方法) 引入jQuery 下载jQuery的开发版和压缩版 从CDN加载jQuery <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> window.jQuery ||
用户8442333
2021/05/20
9980
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法。
阿峰技术博客
2022/10/22
8.5K0
利用Jquery Lazyload JS插件实现网页图片延迟加载
火狐的Http请求插件的安装和使用[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/147776.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/02
1.2K0
火狐的Http请求插件的安装和使用[通俗易懂]
一些原生写法可以替代Jquery方法
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。
javascript.shop
2019/09/04
2.1K0
JQuery学习—JQuery-Validation 使用
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/121266.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/19
4.6K0
程序员Web面试之jQuery
又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦
葡萄城控件
2018/01/10
2.6K0
程序员Web面试之jQuery
Jquery使用小结
这周都在做前端页面的开发,用了Jquery知识比較多,方便以后使用。就做一个小总结吧。
全栈程序员站长
2022/07/10
5720
jQuery 效果使用
.hide()   隐藏匹配的元素。   .hide()     这个方法不接受任何参数。   .hide([duration][,complete])     duration       一个字符串或者数字决定动画将运行多久。     complete       在动画执行完时执行的函数。   .hide([duration][,easing][,complete])     duration       一个字符串或者数字决定
用户1197315
2018/01/19
6.4K0
jQuery使用技巧
使用回调方法的缺点之一是当执行类库中的方法后,上下文对象被设置到另外一个元素,比如,执行下面代码:
零式的天空
2022/03/22
1.3K0
jQuery的使用
1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】
用户5927264
2019/07/31
8.2K0
golang 使用 rabbitmq 延迟队列
这样类似的场景经常会发生在实际的业务中,它们总有一个共性,就是当前并不是马上触发,而是需要过一段时间才进行触发,当触发时间到达时才进行具体的执行。那么问题就来了,为了实现这样的功能,我们如何更加灵活的实现呢?
LinkinStar
2022/09/01
1.2K0
golang 使用 rabbitmq 延迟队列
点击加载更多

相似问题

将列表与列表字典进行比较的最快方法

315

合并n字典并在2.6上加值的最快方法

13

python基于键匹配合并字典的最快方法

30

比较列表与集合列表的最快方法

22

合并具有公共字段的列表的最快方法?

24
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文