0

我是使用 javascript 和 ASP.Net MVC 4 的新手。但我尝试在 Razor @Model 的 bing 地图中添加多个引脚。我试过了：

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

3 回答 3

2

我相信您在将模型转换为 javascript 对象时遇到了问题。

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

  1. Index仅返回您的页面，然后该页面将进行 ajax 调用以获取位置。

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

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));
                   });
              };
    }
于 2013-01-08T22:24:29.123 回答
0

我不确定，关于必应地图。但我已经用谷歌地图实现了同样的功能。可能这会给你一些想法 http://www.harshabopuri.com/onclick-dynamic-google-maps-in-website

于 2013-01-08T21:25:51.607 回答
0

如果您使用 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。

于 2013-01-09T12:09:51.513 回答