Javascript 从Razor模型加载多个Bing地图引脚

我不熟悉使用javascript和ASP.NETMVC4。但是我尝试在bing地图中添加多个pin，来自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>

@model IEnumerable
$（函数（）{
var-map=null；
var位置=空；
函数loadMap（）{
//初始化映射
map=new Microsoft.Maps.map（document.getElementById（'map'）{
凭证：“我的Bing地图密钥”，
enableSearchLogo:false
});
}
功能显示位置（位置）{
功能显示位置（位置）{
//显示位置
变量位置=位置坐标；
setView（{zoom:10，center:new Microsoft.Maps.Location（Location.latitude，Location.longitude）}）；
//var pushpinOptions={icon:virtualPath+'/Content/images/foundation/orbit/Push.png'}；
var检验=“@model”；
警报（测试）；
var pushpin=new Microsoft.Maps.pushpin（map.getCenter（），null）；
对于（变量i=0；i

控制员：

   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 ActionResult Index（）
{
List loc=新列表（）；
型号位置温度=新型号位置（“55.473746”、“8.447411”）；
位置添加（临时）；
型号位置temp1=新型号位置（“55.504991”、“8.443698”）；
loc.Add（临时1）；
型号位置temp2=新型号位置（“55.468283”、“8.438”）；
loc.Add（临时2）；
型号位置temp3=新型号位置（“55.498978”、“8.40002”）；
loc.Add（临时3）；
返回视图（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;
        }
    }

公共类位置
{
公共字符串纬度{get；set；}
公共字符串经度{get；set；}
公共列表Loca{get；set；}
公共位置（字符串纬度、字符串经度）
{
这个。纬度=纬度；
这个经度=经度；
}
}

关于bing地图，我不确定。但我已经用谷歌地图实现了同样的功能。也许这会给你一些想法

---

我认为您在将模型转换为javascript对象时面临一个问题

下面我将索引视图与实际获取数据的部分分开

Index

只返回您的页面，然后该页面将发出ajax调用以获取位置

GetLocations

返回用于在Bing地图上呈现位置的JSON对象位置数组

控制器的更改

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

---

如果使用JavaScriptModel（），可以通过以下方式完成：

您的控制器代码：

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
}

public ActionResult Index（）
{
this.AddJavaScriptVariable（“LocationsVariableInJavaScript”，GetLocationList（））；
这个.AddJavaScriptFunction（“yourmapintfunctioninjavascript”）；
返回视图（）；
}
私有GetLocationList（）
{
List loc=新列表（）；
型号位置温度=新型号位置（“55.473746”、“8.447411”）；
位置添加（临时）；
型号位置temp1=新型号位置（“55.504991”、“8.443698”）；
loc.Add（临时1）；
型号位置temp2=新型号位置（“55.468283”、“8.438”）；
loc.Add（临时2）；
型号位置temp3=新型号位置（“55.498978”、“8.40002”）；
loc.Add（临时3）；
返回位置
}

在javascript文件中，只需迭代位置（通过使用“LocationsVariableInJavaScript”）并添加图钉

---

通过这种方式，您可以将javascript数据与javascript逻辑分离，并且视图中没有任何javascript。

您得到的错误是什么？您正在定义

@model IEnumerable

，但从ViewBag中获取它。。。另外@Viewbag.locations如果首先出错，只会返回一个字符串，而不是JSON或javascriptobject@frictionlesspulley当前位置问题是我没有出错。问题是我不能从模型中提取任何东西。所以问题是我不能像这样做'@model.latitude'和'@model.longitude'。Viewbag只是我尝试过的东西，但没有使用。还可以使用'@model.Count'获得正确的计数。所以我不知道，这是通过视图获取对象。谢谢。你的解决方案几乎是正确的。我已编辑了您的解决方案，使其正常工作

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
}