来自 SQL 的 Asp.Net Core MVC Google Maps api Plot Ployline

2024-05-21 • 问答

我可以使用以下内容在我的地图上绘制点完全没有问题。但现在我想用折线路径连接点，但继续收到错误：“InvalidValueError：not an Array”。我的代码如下，非常感谢任何帮助。

//控制器动作

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>

要根据您的数据制作多段线，请将 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>

来自 SQL 的 Asp.Net Core MVC Google Maps api Plot Ployline

red2yuri 回答：来自 SQL 的 Asp.Net Core MVC Google Maps api Plot Ployline

大家都在问