在谷歌地图的控制器中关联列表的加载

本文关键字:列表 加载 关联 控制器 谷歌地图 | 更新日期: 2023-09-27 18:36:47

我陷入了需要在控制器中获取列表的情况,但现在我正在使用剑道网格来获取将在我的谷歌地图中使用的列表

现在我的问题是

  1. 如何直接在我的控制器中关联控制器中的负载工人列表谷歌地图并将其添加为标记?

    2.如何在屏幕上制作标记列表?

这是我的谷歌地图的Javascript:

<script type="text/javascript">
var geocoder;
    var map;
    function initialize() {
        var minZoomLevel = 4;
        var zooms = 7;
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: minZoomLevel,
            center: new google.maps.LatLng(38.50, -90.50),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        // Bounds for North America
        var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(15.70, -160.50),
     new google.maps.LatLng(68.85, -55.90)
   );
        // Listen for the dragend event
        google.maps.event.addListener(map, 'dragend', function () {
            if (strictBounds.contains(map.getCenter())) return;
            // We're out of bounds - Move the map back within the bounds
            var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();
            if (x < minX) x = minX;
            if (x > maxX) x = maxX;
            if (y < minY) y = minY;
            if (y > maxY) y = maxY;
            map.setCenter(new google.maps.LatLng(y, x));
        });

        // Limit the zoom level
        google.maps.event.addListener(map, 'zoom_changed', function () {
            if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
        });
    }
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    function codeAddress() {
        var infowindow = new google.maps.InfoWindow();
        var address = $('#workerGrid').find("input[name=shiftDay]");
        alert(address);
        $.each(address, function () {
            var currVal = $(this).val();
            address.each(function () {
                geocoder.geocode({ 'address': currVal }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: iconBase + 'man.png',
                            position: results[0].geometry.location,
                            title: currVal
                        });
                        var circle = new google.maps.Circle({
                            map: map,
                            radius: 16093,    // 10 miles in metres
                            fillColor: '#AA0000'
                        });
                        circle.bindTo('center', marker, 'center');

                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infowindow.setContent(currVal);
                                infowindow.open(map, marker);
                            }
                        })(marker, currVal));
                        address.push(marker);

                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            });
        });
        return true;
    }
    window.onload = function () {
        initialize();
        codeAddress();
    }
</script> 

这是我的控制器代码:

public JsonResult LoadWorkerList()
        {
            var workerList = new List<Worker_Address>();
            // check if search string has value
            // retrieve list of workers filtered by search criteria
            var list = (from a in db.Worker_Address
                        where a.LogicalDelete == false
                        select a).ToList();

            List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>();
            foreach (var row in list)
            {
                WorkerAddressInfo ci = new WorkerAddressInfo
                {
                    ID = row.ID,
                    Worker_ID = row.WorkerID,
                    AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID),
                    LogicalDelete = row.LogicalDelete
                };
                wlist.Add(ci);
            }

            return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet);
        }

在谷歌地图的控制器中关联列表的加载

Google API 适用于地理位置,因此您应该存储纬度和纬度值(或者您可能每次都动态生成它们,但这将是一个缓慢的过程)。假设您将其作为实用程序工作,那么您可以从后端创建javascript的位置列表。最后应该是这样的:

var locations = [
      ['<h4>Worker Name 1</h4>', lat1, lon1],
      ['<h4>Worker Name 2</h4>', lat2, lon2],
      ...
      ['<h4>Worker Name N</h4>', latN, lonN]
    ];

然后将它们添加到您的地图中:

   var marker;
    var markers = new Array();
for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
markers.push(marker);

我忘了提到昨天我通过添加getJSON函数解决了问题1

function codeAddress() {
        var infowindow = new google.maps.InfoWindow();
        $.getJSON('/Dashboard/LoadWorkerList', function (address) {
            $.each(address, function () {
                var currVal = this["AddressLine1"];
                geocoder.geocode({ 'address': currVal }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: iconBase + 'man.png',
                            position: results[0].geometry.location,
                            title: currVal
                        })
                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infowindow.setContent(currVal);
                                infowindow.open(map, marker);
                            }
                        })(marker, currVal));
                        address.push(marker);
                    }
                    else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        setTimeout(codeAddress, 2000);
                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            });
        });
        return false;
    }

现在我需要找到谷歌地图内的面板将如何显示谷歌地图屏幕上活动的标记