Googleマップマーカーにjson ajaxを使用する方法

Question

GoogleマップマーカーにJson Ajaxを使用しようとしています.Ajaxを実行するボタンをクリックした後、問題が発生します。それは表示マーカーではない 変更する必要がありますか？ 私の問題はどこですか？ ）

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

    }); 

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."); 

      } 


     } 

が、マーカーが表示されない：

 [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のアヤックス（スクリプト）： これは私のアクションは、実行アヤックスの後です！この問題を解決するには？ またはこの質問の別の方法ですか？ ありがとうございます

Answer 1

あなたの質問には、発生している特定の問題が説明されていません。だから私はあなたにしたことのいくつかを改善する簡単な解決策をあなたに与えるつもりです。

あなたのサーバーメソッドから始めましょう。文字列連結によってjson配列の文字列化されたバージョンを構築しています。それは不必要でエラーが発生しやすいです。どうしてmvcフレームワークの一部であるJSONシリアライザがあなたにそれをさせるのですか？

このマーカークラスのリストを作成し、あなたがJsonメソッドにそれを渡すことができ、あなたのアクションメソッドに今すぐあなたのマーカー

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

を表現するために単純なクラスを作成します。

[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を生成するUrl.Actionメソッドを使用しています。このコードを外部のjavascriptファイルで使用している場合は、this postに記載されている解決方法に従ってください。