MVC 谷歌地图折线答案

【问题标题】：MVC Google Map PolylinesMVC 谷歌地图折线
【发布时间】：2015-06-30 19:59:31
【问题描述】：

我正在尝试创建一个谷歌地图，它将从我的 MVC 模型中的 lat & lng 列表中绘制出一条赛道。我已经用标记成功地做到了这一点，但我需要用折线来创建课程路径。以下是我拥有但无法显示的线条。

有什么建议吗？

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

谢谢！

【问题讨论】：

标签： asp.net-mvc google-maps razor model-view-controller google-polyline

【解决方案1】：

对于flightPath Polyline 中的path，请为其提供点数组，而不是对函数的引用。应该是这样的：

  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 来平滑您的多段线。

【讨论】：

【解决方案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>

【讨论】：