从Razor模型加载多个Bing Maps引脚

Question

I'm new at using javascript and ASP.Net MVC 4. But i have tried to add multiple pins in the bing map, from the Razor @Model. i have tried:

@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>

The Controller:

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

and finally the Model:

  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

I believe that you are facing an issue in converting the Model to javascript object.

Below I separated the Index view from the part which actually fetches the data

1. Index returns just your page which would then make an ajax call for fetching locations.

2. GetLocations returns a JSON object array of locations to be used for rendering positions on Bing Maps

Changes to Controller

    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 Changes

Changed showPosition which now makes an ajax request fetching JSON location list and pushing it onto the map. Note : You might have to refactor rest of your javascript just a bit.

    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

I an not sure, about bing maps. But i have implemented same with google maps. may be this will give you some idea http://www.harshabopuri.com/onclick-dynamic-google-maps-in-website

Answer 3

If you use JavaScriptModel ( http://jsm.codeplex.com ) you could do it the following way:

Your controller code:

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
}

In your javascript file just iterate over locations (by using "LocationsVariableInJavaScript") and add the pushpins.

This way you separate javascript data from javascript logic and you don't have any javascript in the view.