javascript - 我需要显示一条折线，其中包含从数据库动态获取的一组点，精确地捕捉到道路

Question

我有一条由一组从数据库动态获取的纬度和经度值组成的折线，我需要它在绘制时准确地捕捉到道路。

   $("#btnClk")
        .button()
        .click(function (event) {
            //  event.preventDefault();
            var vanselect = document.getElementById("svanid").value;
            var vanftdt = document.getElementById("ResDt").value;
         if ((vanselect.trim() != "") && (vanftdt.trim() != "")) {
                $.post("VanRoute.aspx", {
                    vanno: vanselect,
                    vandt: vanftdt

                     }, function (data, status) {

                    alert("Request In process, Please wait.");
                    var first = data.split('~')[0];
                    var second = data.split('~')[1];
                     var vanlocj = JSON.parse(first);

                    var vanlocjson = JSON.parse(second);


                    for (var i = 0; i < vanlocjson.length; i++) {

                        var vanlat, vanlon = "";
                        vanlat = vanlocjson[i].LAT;
                        vanlon = vanlocjson[i].LON;

在此之后，我怎样才能进一步向前将折线精确地捕捉到道路

我在函数初始化中创建了折线叠加，它将在页面加载时工作。

       function initialize() {
          var mapOptions = {
              center: new google.maps.LatLng(12.860472, 77.664017),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          map1 = new google.maps.Map(document.getElementById("map"), mapOptions);
         // directionRenderer.setMap(map1);
         // directionRenderer.setOptions({
          //    draggable: true
          //});

          poly = new google.maps.Polyline({
              strokeColor: '#0000ff',
              strokeOpacity: 1.0,
              strokeWeight: 3
          });
         poly.setMap(map1);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

  });

Answer 1

这里我举了一个如何使用方向服务克服航点限制的示例:Gmap study: multi auto routes/direction with unlimited waypoints click by click 。您可以将其视为基本内容并根据您的需要进行更改。