1

asp.net MVC 3 アプリケーションを構築しています。データが格納されている SQL Server データベースがあり、エンティティ フレームワークの最初のスキーマ モデルを使用しています。データベースからデータを取得する方法は知っていますが、MVC にはまだ慣れていませんが、データベースに保存されている座標から地図にプッシュピンを追加する人がわかりません。誰でも例を示して私を助けることができますか?

前もって感謝します

4

1 に答える 1

2

まず、ピン データを SqlServer からロードするためのサーバー側コードが必要です。

C# のコード ビハインドでは、いくつかのピンの緯度/経度変数を入力Page_Loadして、javacsript 側で使用するために渡すことができます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
public partial class _Default : System.Web.UI.Page
{
    protected string[] pinLat;
    protected string[] pinLong;

    public static class JavaScript
    {
        public static string Serialize(object o)
        {
            JavaScriptSerializer js = new JavaScriptSerializer();
            return js.Serialize(o);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // Populate your latiude and longitude from SQL Server into our arrays to be used in javascript
        pinLat = new string[3] { "55.342575", "15.342575", "25.342575" };
        pinLong = new string[3] { "-55.342570", "-55.342570", "-55.342570" };
    }
}

Brianから提供された JavaScript.Serialize を使用して、c# 配列を JavaScript 配列に変換し、それぞれをループしてマップに固定します。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" language="javascript">

    // Serialize our c# array into javascript array
    var pinLatitude = <%=JavaScript.Serialize(this.pinLat) %>;
    var pinLogitude = <%=JavaScript.Serialize(this.pinLong) %>;


      function loadPins() {
              try {
                  for (var i = 0; i < pinLatitude.length; i++) {

                      var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(pinLatitude[i], pinLogitude[i]),{ draggable: true });
                      pushpin.setOptions({ visible: true });
                      map.entities.push(pushpin);

                  }
              }
              catch (err) {
                alert(err)
              }
          }

     function GetMap() {
              // Initialize the map
              try {
                  map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: 'heyhey', mapTypeId: Microsoft.Maps.MapTypeId.road });
                  loadPins();
              }
              catch (err) {
                  alert(err.message);
              }
          }


</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <body onload="GetMap();">
         <div id='mapDiv' style="position:relative; width:750px; height:500px;"></div>
    </body>
</asp:Content>
于 2013-08-21T16:39:19.473 に答える