折线使用谷歌地图api v3捕捉道路 [英] polyline snap to road using google maps api v3

问题描述

在google maps api v2中很简单，

  var map = new GMap2（document.getElementById（map） ）; 
 map.setCenter（new GLatLng（53.7877，-2.9832），13）
 // map.addControl（new GLargeMapControl（））; 
 // map.addControl（new GMapTypeControl（））; 
 var dirn = new GDirections（）; 
 
 // var firstpoint = true; 
 var gmarkers = []; 
 var gpolys = []; 
 var dist = 0; 
 
 // ==当用户点击地图时，从该点获取directiobns到自己== 
 
 gmarkers.push（new google.maps.LatLng（53.7877 ，-2.9832））; 
 gmarkers.push（new google.maps.LatLng（53.9007，-2.9832））; 
 gmarkers.push（新GLatLng（53.600，-2.700））; 
 
 
 $ b for（var i = 0; i  console.log（gmarkers [i]）; 
 dirn.loadFromWaypoints（[gmarkers [i] .toUrlValue（6），gmarkers [i + 1] .toUrlValue（6）]，{getPolyline：true}）; 
 
} 
 
 
 // ==当加载事件完成时，绘制街道上的点== 
 GEvent.addListener（dirn，加载，function（）{
 //捕捉多段线中的最后一个顶点
 var n = dirn.getPolyline（）。getVertexCount（）; 
 map.addOverlay（dirn.getPolyline（） ）; 
 gpolys.push（dirn.getPolyline（））; 
 dist + = dirn.getPolyline（）。getDistance（）; 
 document.getElementById（distance）。innerHTML =路径长度：+（dist / 1000）.toFixed（2）+km。+（dist / 1609.344）.toFixed（2）+miles。; 
}）; 
 GEvent.addListener（dirn，error，function（）{
 GLog.write（Failed：+ dirn.getStatus（）。code）; 
}）; 
 console.log（dirn）; 
  

在google api V3中，这种方式简单并不起作用。有一些像方向服务，但我没有任何想法，我怎么能通过我的点绘制折线和折线将被收购。

您与路线服务处于正确的轨道上。以下是示例代码：

  var map，path = new google.maps.MVCArray（），
 service = new google .maps.DirectionsService（），poly; 
 
函数Init（）{
 var myOptions = {
 zoom：17，
 center：new google.maps.LatLng（37.2008385157313，-93.2812106609344），
 mapTypeId：google.maps.MapTypeId.HYBRID，
 mapTypeControlOptions：{
 mapTypeIds：[google.maps.MapTypeId.ROADMAP，google.maps.MapTypeId.HYBRID，
 google.maps。 MapTypeId.SATELLITE] 
}，
 disableDoubleClickZoom：true，
 scrollwheel：false，
 draggableCursor：crosshair
} 
 
 map =新的google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 poly = new google.maps.Polyline（{map：map}）; 
 google.maps.event.addListener（map，click，function（evt）{
 if（path.getLength（）=== 0）{
 path.push（evt。 latLng）; 
 poly.setPath（path）; 
} else {
 service.route（{
 origin：path.getAt（path.getLength（） -  1），
 destination：evt.latLng，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}，function（result，status）{
 if（status == google.maps.DirectionsStatus。 OK）{
 for（var i = 0，len = result.routes [0] .overview_path.length; 
i  path.push（result.routes [ 0] .overview_path [i]）; 
} 
} 
}）; 
} 
}）; 
} 
  

另请参见我的工作示例： http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

In google maps api v2 it was easy,

var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(53.7877, -2.9832),13)
//    map.addControl(new GLargeMapControl());
//    map.addControl(new GMapTypeControl());
    var dirn = new GDirections();

//      var firstpoint = true;
    var gmarkers = [];
    var gpolys = [];
    var dist = 0;

// == When the user clicks on a the map, get directiobns from that point to itself ==

gmarkers.push(new google.maps.LatLng(53.7877, -2.9832));
gmarkers.push(new google.maps.LatLng(53.9007, -2.9832));
gmarkers.push(new GLatLng(53.600, -2.700));



for (var i = 0; i < gmarkers.length-1; i++) {
    console.log(gmarkers[i]);
                dirn.loadFromWaypoints([gmarkers[i].toUrlValue(6),gmarkers[i+1].toUrlValue(6)],{getPolyline:true});

}


// == when the load event completes, plot the point on the street ==
    GEvent.addListener(dirn,"load", function() {
// snap to last vertex in the polyline
        var n = dirn.getPolyline().getVertexCount();
            map.addOverlay(dirn.getPolyline());
            gpolys.push(dirn.getPolyline());
            dist += dirn.getPolyline().getDistance();
            document.getElementById("distance").innerHTML="Path length: "+(dist/1000).toFixed(2)+" km. "+(dist/1609.344).toFixed(2)+" miles.";
           });
    GEvent.addListener(dirn,"error", function() {
        GLog.write("Failed: "+dirn.getStatus().code);
    });
console.log(dirn);

In google api V3 this way simple doesnt work. There is something like directions service but I dont have any idea how I can draw polyline through my points and polyline will be snaped to road.

解决方案

You were on the right track with the directions service. Here's sample code:

var map, path = new google.maps.MVCArray(),
    service = new google.maps.DirectionsService(), poly;

function Init() {
  var myOptions = {
    zoom: 17,
    center: new google.maps.LatLng(37.2008385157313, -93.2812106609344),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,
          google.maps.MapTypeId.SATELLITE]
    },
    disableDoubleClickZoom: true,
    scrollwheel: false,
    draggableCursor: "crosshair"
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  poly = new google.maps.Polyline({ map: map });
  google.maps.event.addListener(map, "click", function(evt) {
    if (path.getLength() === 0) {
      path.push(evt.latLng);
      poly.setPath(path);
    } else {
      service.route({
        origin: path.getAt(path.getLength() - 1),
        destination: evt.latLng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var i = 0, len = result.routes[0].overview_path.length;
              i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
          }
        }
      });
    }
  });
}

Also, see my working example: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

这篇关于折线使用谷歌地图api v3捕捉道路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！