Asp.Net 核心 MVC Google 地图 api 从 SQL 绘制多线

Question

我可以毫不费力地使用以下方法在我的地图上绘制点。但现在我想用折线路径连接点，但继续收到错误：“InvalidValueError：不是数组”。我的代码在下面，非常感谢任何帮助。

//控制器动作

public async Task<IActionResult> Index()
        {

            var requests = _context.Complaints.ToList();

            var locations = requests.Where(x=>x.ComplaintId>11830).ToList();

            string markers = "[";
            int i;

            for (i = 0; i < locations.Count; i++)
            {
                markers += "{";
                //markers += string.Format("'title': '{0}',", locations[i].ComplaintId);
                markers += string.Format("lat: {0},", locations[i].Lat);
                markers += string.Format("lng: {0}", locations[i].Lon);
                //markers += string.Format("'description': '{0}'", locations[i].ComplaintId);
                markers += "},";
            }

            markers += "]";
            ViewBag.markers = markers;
            return View(requests.Take(50));
        }

//索引视图

<script type="text/javascript">
            var markers = @Html.Raw(ViewBag.markers);
            window.onload = function () {


                var mapOptions = {
                    center: new google.maps.LatLng(-43.1022, 147.7485 ),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var infoWindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    const myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    const marker = new google.maps.Polyline({
                        path: myLatlng,
                        map: map
                        //title: data.title
                    });
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
            }
</script>


<script src="https://maps.googleapis.com/maps/api/js?#myKeyhidden#"></script>

Answer 1

要根据您的数据制作折线，请将 lat/lng 值推入数组并将其用作折线的路径。

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
const path = [];
for (i = 0; i < markers.length; i++) {
  var data = markers[i]
  const myLatlng = new google.maps.LatLng(data.lat, data.lng);
  path.push(myLatlng);
  const polyline = new google.maps.Polyline({
    path: path,
    map: map
  });
}

代码片段：

var markers = [{lat:-43.1022, lng: 147.7485},
{lat:-43.14021, lng: 147.7486},
{lat:-43.1020, lng: 147.7588},
{lat:-43.15019, lng: 147.7690}];// @Html.Raw(ViewBag.markers);
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(-43.1022, 147.7485),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  const path = [];
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    const myLatlng = new google.maps.LatLng(data.lat, data.lng);
    path.push(myLatlng);
    const polyline = new google.maps.Polyline({
      path: path,
      map: map
      //title: data.title
    });
  }
}

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
  <div id="dvMap"></div>
</body>

</html>

Asp.Net 核心 MVC Google 地图 api 从 SQL 绘制多线

Asp.Net Core MVC Google Maps api Plot Ployline from SQL

javascript

asp.net-core

google-maps-api-3