javascript - Json 结果 MVC Controller 通过 Jquery 传输到 Google map

Question

我有一个问题，因为我想使用这个返回 Json 列表的 Json 结果，但我的问题是我应该如何调用我将用于地理编码并向我的 Google map 添加标记的 json 结果？我使用了 getJson 并且它不起作用，但我还没有尝试过 .ajax 函数

这是我的代码集:

<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();
    $.getJson("Dashboard/DashboardIndex",null , function(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
                        })


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

    window.onload = function () {
        initialize();
        codeAddress();

    }
</script>

还有我的 Controller 上的 JsonResult

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

我感谢一些可以提前帮助我的人:)

Answer 1

很难猜测哪里出了问题，因为您没有发布 JSON 格式，并且收到了未发布的代码错误 (toLowerCase)。我认为它在以下领域:

   function codeAddress() {
        var infowindow = new google.maps.InfoWindow();
    $.getJson("Dashboard/DashboardIndex",null , function(address) {
        console.log("full json object",address);//<--should show an array of objects
        $.each(address, function () {
            console.log(this);//<--here you can see what the JSON object is
            var currVal = this["AddressLine1"];//<--guess from what your C# code looks like
            //next each doesn't make much sense unless you have an array of arrays
            // but the C# code makes json for a list (not a list of lists)

您可以使用 IE 进行控制台输出，但不必在此处发布输出，因为我已经可以告诉您它将是 [Object, object]。要获得有用的信息，您必须将 Firefox 与 Firebug 或 Chrome 结合使用。要查看控制台，您可以按 F12

行:

setTimeout(codeAddress, 2000);

可以进行优化，因为现在当您发出太多请求时，您将再次获取整个地址列表并从头开始，而不是“等待”2 秒并继续原来的位置。

以下代码:

map.setCenter(results[0].geometry.location);

为什么要在循环内设置 map 中心？它最终会得到最后找到的地址的中心，因此您也可以在循环之外执行此操作，将中心设置为最后找到的地址。