從Razor模型加載多個Bing地圖引腳

Question

我是使用JavaScript和ASP.Net MVC 4的新手。但我試圖在bing地圖中添加多個引腳，來自Razor @Model。我曾嘗試：

@model IEnumerable<Foundation3SinglePageRWD.Models.Locations> 
      <div id="map" style="height: 800px; width: 100%"></div> 

    <script type="text/javascript"> 
    $(function() { 
     var map = null; 
     var location = null; 

     function loadMap() { 
      // initialize the map 
      map = new Microsoft.Maps.Map(document.getElementById('map'), { 
       credentials: "My Bing Map Key", 
       enableSearchLogo: false 
      }); 

     } 

     function showPosition(position) { 
        function showPosition(position) { 
      //display position 
      var location = position.coords; 
      map.setView({ zoom: 10, center: new Microsoft.Maps.Location(location.latitude, location.longitude) }); 
      //var pushpinOptions = { icon: virtualPath + '/Content/images/foundation/orbit/Push.png' }; 
      var test = '@model'; 
      alert(test); 
      var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
      for (var i = 0; i < test.l.length; i++) { 
       map.entities.push(pushpin); 
       pushpin.setLocation(new Microsoft.Maps.Location(test.latitude, test.longitude)); 
      }; 

     } 

     } 
     function positionError(position) { 
      alert("Error getting position. Code: " + position.code); 
     } 
     loadMap(); 
     navigator.geolocation.getCurrentPosition(showPosition, positionError); 

    }); 

</script> 

控制器：

public ActionResult Index() 
     { 
      List<Models.Locations> loc = new List<Models.Locations>(); 
      Models.Locations temp = new Models.Locations("55.473746", "8.447411"); 
      loc.Add(temp); 
      Models.Locations temp1 = new Models.Locations("55.504991", "8.443698"); 
      loc.Add(temp1); 
      Models.Locations temp2 = new Models.Locations("55.468283", "8.438"); 
      loc.Add(temp2); 
      Models.Locations temp3 = new Models.Locations("55.498978", "8.40002"); 
      loc.Add(temp3); 
      return View(loc); 
     } 

終於型號：

public class Locations 
    { 
     public string latitude { get; set; } 
     public string longitude { get; set; } 
     public List<Locations> Loca { get; set; } 
     public Locations(string latitude, string longitude) 
     { 
      this.latitude = latitude; 
      this.longitude = longitude; 
     } 
    } 

Answer 1

我相信你正在面臨轉換模型爲JavaScript對象的問題。

下面我分開這實際上獲取的數據

1. Index回報只是你的頁面，然後這將使Ajax調用用於獲取位置的部分索引視圖。

2. GetLocations返回到被使用的位置的JSON對象陣列上Bing地圖渲染位置

更改控制器

public ActionResult Index() 
    { 
     return View(); 
    } 


    public ActionResult GetLocations() 
    { 
     List<Models.Locations> locations = new List<Models.Locations>() 
     { 
      new Models.Locations("55.473746", "8.447411") , 
      new Models.Locations("55.504991", "8.443698"), 
      new Models.Locations("55.468283", "8.438"), 
      new Models.Locations("55.468283", "8.438"), 
      new Models.Locations("55.468283", "8.438"), 
      new Models.Locations("55.498978", "8.40002") 
     } 
     return JsonResult(locations); 
    } 

的Javascript變化

更改showPosition其中現在使得ajax請求獲取JSON位置列表並將其推送到地圖上。注意：您可能需要稍微重構JavaScript的其餘部分。

function showPosition(position) 
    { 
     //display position 
      var location = position.coords; 
      map.setView({ 
       zoom: 10, 
       center: new Microsoft.Maps.Location(location.latitude, 
                location.longitude) 
      }); 

      $.ajax({ 
       url : 'getlocations' , 
       type : 'json' 

      }).done(function(locationsArray){ 

      alert(locationsArray); 
      var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 

      $.each(locationsArray, 
        function(index,location) 
        { 
         map.entities.push(pushpin); 
         pushpin.setLocation(new Microsoft.Maps.Location(
          location.latitude, 
          location.longitude)); 
        }); 
       }; 
    } 

Answer 2

我的不知道，關於Bing地圖。但我已經實施谷歌地圖相同。可能這會給你一些想法 http://www.harshabopuri.com/onclick-dynamic-google-maps-in-website

Answer 3

如果使用JavaScriptModel（http://jsm.codeplex.com），你可以做到這一點通過以下方式：

控制器代碼：

public ActionResult Index() 
{ 
    this.AddJavaScriptVariable("LocationsVariableInJavaScript", GetLocationList()); 
    this.AddJavaScriptFunction("YourMapInitFunctionInJavaScript"); 
    return View(); 
} 

private GetLocationList() 
{ 
    List<Models.Locations> loc = new List<Models.Locations>(); 
    Models.Locations temp = new Models.Locations("55.473746", "8.447411"); 
    loc.Add(temp); 
    Models.Locations temp1 = new Models.Locations("55.504991", "8.443698"); 
    loc.Add(temp1); 
    Models.Locations temp2 = new Models.Locations("55.468283", "8.438"); 
    loc.Add(temp2); 
    Models.Locations temp3 = new Models.Locations("55.498978", "8.40002"); 
    loc.Add(temp3); 
    return loc 
} 

在你的JavaScript文件只是遍歷位置（通過使用「 LocationsVariableInJavaScript「）並添加圖釘。

這樣你就可以將javascript數據從javascript邏輯中分離出來，並且在視圖中沒有任何javascript。