谷歌地图 api - 将标记捕捉到最近的道路 [英] Google maps api - snap marker to nearest road

查看:39
本文介绍了谷歌地图 api - 将标记捕捉到最近的道路的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将坐标捕捉到最近的道路.但我仍然不能以简单的方式做到这一点.这是简单的代码,如何改进它,结果将是道路上的标记:

I'm trying to snap coordinate to nearest road. But still I can't do that in simple way. This is simple code, how to improve it that result would be marker on the road:

<!DOCTYPE html>
<html>
<head>
<title>Map</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 300px; width:600px }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
        var homeLatlng = new google.maps.LatLng(24.696554,-81.328238);

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/green-dot.png',
            new google.maps.Size(32, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );

        var shadow = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );

        var homeMarker = new google.maps.Marker({
            position: homeLatlng, 
            map: map,
            title: "Check this cool location",
            icon: image,
            shadow: shadow
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

我想知道最简单的方法.感谢您的帮助.

I would like to get idea for easiest method. Thanks for any help.

推荐答案

使用路线服务.获取从兴趣点到兴趣点的行车路线.应该在路上.

Use the directions service. Get driving directions from the point of interest to the point of interest. Should be on the road.

var directionsService = new google.maps.DirectionsService();

directionsService.route({origin:homeLatlng, destination:homeLatlng, travelMode: google.maps.DirectionsTravelMode.DRIVING}, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK)
  {
    var homeMarker = new google.maps.Marker({
      position: response.routes[0].legs[0].start_location, 
      map: map,
      title: "Check this cool location",
      icon: image,
      shadow: shadow
    });
  } else {
    var homeMarker = new google.maps.Marker({
      position: homeLatlng,
      map: map,
      title: "Check this cool location",
      icon: image,
      shadow: shadow
    });
  }
});

示例

这篇关于谷歌地图 api - 将标记捕捉到最近的道路的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆