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. GetLocationsBingMapsでの位置のレンダリングに使用される場所の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

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 に答える
0

bing マップについてはよくわかりません。しかし、私はグーグルマップで同じことを実装しました。これはあなたにいくつかのアイデアを与えるかもしれません http://www.harshabopuri.com/onclick-dynamic-google-maps-in-website

于 2013-01-08T21:25:51.607 に答える