如何將 json ajax 用於谷歌地圖標記

Question

我嘗試將 Json Ajax 用於谷歌地圖標記。所以在單擊按鈕運行 Ajax 后，我遇到了問題。 它不是顯示標記 應該進行更改嗎？ 我的問題在哪里？ 這是運行 ajax 后的我的操作：

      [HttpPost]
    public ActionResult AsMapAjax(string jobid,string subid,string Searchitem)
    {
        string markers = "[";
        foreach (var item in UnitOfWork.WD.GetAll())
        {
            markers += "{";
            markers += string.Format("'title': '{0}',", "Test");
            markers += string.Format("'lat': '{0}',", item.Lat);
            markers += string.Format("'lng': '{0}',", item.Lng);
            markers += string.Format("'description': '{0}'", "www.google.com");

            markers += "},";
        }
        markers += "];";

        var mark= new MvcHtmlString(markers);
        return Json(new { success = true, responseText = mark }, JsonRequestBehavior.AllowGet);


    }
}

和我的 jquery ajax（腳本）：

navigator.geolocation.getCurrentPosition(function (p) {
    var latlng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);

    var mapOptions = {
        center: latlng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    //You re Here
    var iconoMarca = "../../images/URHere.gif";
    mymarker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,

        map: map,
        icon: iconoMarca,
        position: latlng

    });
      $('#prt').on('click', function () {
        var Subid = document.getElementById("bluee").value;
        var jobid = document.getElementById("Jobs").value;
        var Searchitem = document.getElementById("SearchItem").value;
        $.ajax({
            type: "post",
            url: "/My/AsMapAjax",
            dataType: 'json',


            data: { subid:Subid,jobid:jobid,Searchitem:Searchitem},
            success: function (response) {
                if (response != null && response.success) {
                    //alert(response.responseText);
                    markers=response.responseText;

                } else {

                    alert("there is a problem!");
                }
            },
            error: function (response) {
                alert("Sorry!try again please.");

            }


        }

)

        ///////
        //label
        var  numberMarkerImg = {
            url: '../../images/shapemarker.png',
            size: new google.maps.Size(32, 38),
            scaledSize: new google.maps.Size(32, 38),
            labelOrigin: new google.maps.Point(21,42)
        };
        var markerLabel = 'Test';


        for (i = 0; i < markers.length; i++) {

            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);

                var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                //label
                label:markerLabel ,
                title: data.title,
                icon:numberMarkerImg,
                animation: google.maps.Animation.DROP


            });


            ( function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                    window.location.href = "/My/sargarmi";

                });
            })
         (marker, data);

        }


        google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center);
        });

    });

但標記不顯示！ 如何解決這個問題？ 或者是這個問題的其他方式？ 多謝

Answer 1

您的問題沒有解釋您遇到的具體問題。 所以我將給你一個簡單的工作解決方案，它可以改進你所做的一些事情。

讓我們從您的服務器方法開始。 您正在通過字符串連接構建 json 數組的字符串化版本。 這是不必要的並且容易出錯。 為什么不讓作為 mvc 框架一部分的 JSON 序列化程序為您做這件事呢？

創建一個簡單的類來表示您的標記

public class Marker
{
    public string Title { set; get; }
    public double Lat { set; get; }
    public double Lng { set; get; }
}

現在在您的操作方法中，構建此 Marker 類的列表，您可以將其傳遞給Json方法。

[System.Web.Mvc.HttpPost]
public ActionResult AsMapAjax(string jobid, string subid, string Searchitem)
{
    //Hard coded for demo. You may replace with values from db
    var list = new List<Marker>
    {
        new Marker() { Title="AA" ,Lat =  -33.890542, Lng=151.274856 },
        new Marker() { Title="BB", Lat =  -33.923036, Lng=151.259052 },
        new Marker() { Title="CC" ,Lat =  -34.028249, Lng=151.157507 },
    };
    return Json(new { success = true, responseText = list });
}

現在在您的客戶端，您對該操作方法進行 ajax 調用，讀取返回的響應並添加標記。

$(function() {
    $('#prt').on('click', function() {
        initMap();
    });
});

function initMap() {
    //read the parameter values you want to send to server
    var searchItem =$("#SearchItem").val();
    var jobs=$("#Jobs").val();
    var subid = $("#bluee").val();

    var map = new google.maps.Map(document.getElementById('map'),
        {
            zoom: 8
        });
    var url = "@Url.Action("AsMapAjax", "Home")";

    $.post(url, { searchTerm: searchItem,jobid: jobs,subid : subid },function(res) {
            if (res.success) {
                var latLng;
                $.each(res.responseText,function(i, item) {
                        latLng = new google.maps.LatLng(item.Lat, item.Lng);
                        var marker = new google.maps.Marker({
                            position: latLng,
                            map: map
                        });

                    });
                map.setCenter(latLng);
            }
    });
}

我正在使用Url.Action方法為Url.Action方法生成正確的相對 url，因為我的腳本位於 razor 代碼塊內。 如果你是在一個外部JavaScript文件中使用此代碼，請介紹的解決方案這個帖子來處理這種情況