Question

我正在构建一个asp.net MVC 3应用程序。我有一个SQL Server数据库，我的数据存储在那里，我正在使用实体框架中的模式第一模型。我知道如何从数据库中获取数据，但我仍然是MVC的新手，我不知道从数据库中存储的坐标向地图添加图钉的人。任何人都可以通过展示一个例子来帮助我。

提前谢谢

Answer 1

首先，您需要一些服务器端代码才能从SqlServer加载引脚数据。

在您的c＃代码后面，您可以在Page_Load中填充一些pin纬度/经度变量，以便在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>

在ASP.net MVC3中将图钉添加到bing map视图

1 个答案: