MVC Google Map Полилинии

Question

Я пытаюсь создать карту Google, которая вытащит гоночный курс из списка lat & lng в моей модели MVC. Я успешно сделал это с помощью маркеров, но мне нужно сделать это с помощью полилиний, чтобы создать путь к курсу. Ниже приводится то, что у меня есть, но я не могу заставить строки появляться.

Любые предложения?

         <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script> 
            <script> 

             function initialize() { 
              var mapOptions = { 
               zoom: 10, 
               center: new google.maps.LatLng(@Model.Courses.Latitude, @Model.Courses.Longitude), 
               mapTypeId: google.maps.MapTypeId.TERRAIN 
              }; 

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

              @foreach (var item in Model.CourseRatings.ValuesList) 
              { 
               <text>addMarker(@item.Item2, @item.Item3)</text> 
              } 

               var flightPath = new google.maps.Polyline({ 
                path: function addMarker(x, y) { new google.maps.LatLng(x, y); }, 
                geodesic: true, 
                strokeColor: '#FF0000', 
                strokeOpacity: 1.0, 
                strokeWeight: 2 
               }); 
               flightPath.setMap(map); 

             } 

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

            </script> 

Спасибо!

Answer 1

Для path в вашем flightPath Polyline, поставьте его с массивом ваших точек, а не ссылкой на функцию. Что должно выглядеть примерно так:

var flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

Также рассмотрите возможность использования snap to road api к более гладкой ломаной линии.

Answer 2

Это работает для меня, но я собираюсь попробовать сглаживающий вы упомянули:

         <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script> 
            <script> 

             function initialize() { 
              var mapOptions = { 
               zoom: 10, 
               center: new google.maps.LatLng(@Model.Courses.Latitude, @Model.Courses.Longitude), 
               mapTypeId: google.maps.MapTypeId.TERRAIN 
              }; 

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

              var flightPathCoordinates = 
              [ 
               @foreach (var item in Model.CourseRatings.ValuesList) 
               { 
                <text>new google.maps.LatLng(@item.Item2, @item.Item3),</text> 

               } 
              ]; 

              var flightPath = new google.maps.Polyline({ 
               path: flightPathCoordinates, 
               geodesic: true, 
               strokeColor: '#FF0000', 
               strokeOpacity: 1.0, 
               strokeWeight: 2 
              }); 
              flightPath.setMap(map); 

             } 

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

            </script>