MVC Google地图多段线 [英] MVC Google Map Polylines

问题描述

我正在尝试创建一个Google地图，该地图将从经纬度列表中绘制出一个比赛路线。 lng在我的MVC模型中。我已经用标记成功完成了这个任务，但我需要用多段线来创建课程的路径。以下是我所拥有的，但无法显示的行。

有什么建议吗？

 < script src =https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false>< / script> 
< script> 
 
函数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（Model.CourseRatings.ValuesList中的var项目）
 {
< 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> 
  

谢谢！

解决方案

对于 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），
 google.maps.LatLng（-27.46758， 153.027892）
]; 
 var flightPath = new google.maps.Polyline（{
 path：flightPlanCoordinates，
 geodesic：true，
 strokeColor：'＃FF0000'，
 strokeOpacity：1.0， 
 strokeWeight：2 
}）; 
  

请考虑使用捕捉到道路api 以平滑您的多段线。

I'm trying to create a Google Map that will draw out a race course from a list of lat & lng in my MVC model. I have successfully done this with markers but I need to do it with polylines to create a path of the course. Below is what I have but can't get the lines to show up.

Any suggestions?

                                        <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>

Thank you!

解决方案

For the path in your flightPath Polyline, supply it with an array of your points, rather than a reference to a function. Which should looks something like this:

  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
  });

Also consider using the snap to road api to smoother your polyline.

这篇关于MVC Google地图多段线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！