65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Virtual Earth Info-Box 收集数据

Rukshan Samanthilaka
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (2投票s)

2010 年 2 月 16 日

CPOL

3分钟阅读

viewsIcon

17851

downloadIcon

204

使用 Virtual Earth 进行基于位置的信息收集方法。

VEDataCollection

引言

本文介绍了如何基于 Virtual Earth 从用户那里收集信息。 在地图上，会显示一个图钉，当用户将鼠标悬停在图钉上时，会显示一个信息框，其中包含收集用户所需信息的控制器。 用户可以输入与该位置相关的信息，然后按“保存”按钮以保存信息并继续。 在本文中，我将使用 Virtual Earth API、JavaScript、AJAX 控件和 HTML 来展示如何执行此操作。

使用代码

加载基本地图

首先，我将介绍如何将 Virtual Earth 地图加载到支持 AJAX 的 ASP 页面 (.aspx)。 在继续之前，让我们将基本地图加载到我们的网页中。 这是我们在 AJAX 启用的 ASP 页面上加载 Virtual Earth 地图时应该做的事情

HTML

在页面的 body 标签内，我们应该调用 JavaScript 函数 LoadMap()

<body onload="LoadMap()">

在 form 标签内，应该实现 ScriptManager AJAX 控制器

<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
<Scripts> 
<asp:ScriptReference 
Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" /> 
</Scripts> 
</asp:ScriptManager>
....
....
</form>

最后，在 HTML 文档中，应该包含一个 div 标签，用于显示地图。 地图的显示大小在 style 标签中指定。

<div style="position:relative;width:808px;
      height:680px;left:10px;top:10px;" id="mapDiv"></div>

后台代码

在代码隐藏 page_load() 事件中，我注册了运行从 HTML 代码调用的 LoadMap() 函数所需的脚本。 我可以在 HTML 页面中包含此 JavaScript，但我在代码隐藏中使用它，因为这会使后续工作更容易进行。 在这里，我使用了 StringBuilder 类来添加 JavaScript，并使用 ClientScript.RegisterStartupScript 将脚本注册为启动脚本。

protected void Page_Load(object sender, EventArgs e) 
{ 
    System.Text.StringBuilder mapScript = 
                new System.Text.StringBuilder(); 
    mapScript.Append("function LoadMap()"); 
    mapScript.Append("{"); 
    mapScript.Append("myMap = new VEMap('mapDiv');"); 
    mapScript.Append("myMap.LoadMap();"); 
    mapScript.Append("myMap.SetZoomLevel(12);"); 
    mapScript.Append("myMap.SetCenter(new " + 
                     "VELatLong(-38.374238,145.221842));");
    mapScript.Append("}"); 
    Type t = this.GetType(); 
    if (!ClientScript.IsStartupScriptRegistered(t, "MapScript")) 
        ClientScript.RegisterStartupScript(t, "MapScript", 
                                           mapScript.ToString(), 
                                           true);
}

现在，页面应该显示这样的地图

VEDataCollectionSimpleMap.JPG

添加图钉

在 ASP 页面上成功显示地图后，我们现在将向地图添加一个图钉。 在这里，我只添加一个图钉，但稍后，您可以根据需要添加更多图钉。

//Defining a array to hold shapes
mapScript.Append("var shapes = new Array();");

//shape location
mapScript.Append("var vePoint1 = " + 
   "new VELatLong(-38.374238,145.201842);");

//Point details (title,desc,shape type)
mapScript.Append("var shape1 = " + 
   "new VEShape(VEShapeType.Pushpin,vePoint1);");
mapScript.Append("shape1.SetTitle('Point1');"); 
mapScript.Append("shapes.push(shape1); ");

// Adding shapes to shape layer and to map 
mapScript.Append("var shapeLayer = new VEShapeLayer();"); 
mapScript.Append("myMap.AddShapeLayer(shapeLayer);"); 
mapScript.Append("shapeLayer.AddShape(shapes);");

设置表单

在向地图添加图钉后，下一步是向图钉描述部分添加控制器。 在这里，我使用形状描述部分来添加控件。

mapScript.Append("shape1.SetDescription(\"" + getInfoBox() + "\");");

getInfoBox() 是一个 C# 函数，它为我们希望包含的控件生成 HTML 代码。 我包含了一个下拉菜单、一个文本框和一个保存按钮。

private string getInfoBox() 
{ 
    string strInfoBox = ""; 
    strInfoBox = "<FORM NAME='myform'><p>Description :
                  <input type=text id='descbox' value='' />"; 
    strInfoBox += "</br>Type :<br/> <select style='width:155px;' name='type'>"; 
    strInfoBox += "<option selected='yes' value='B'>Bus Station</option>"; 
    strInfoBox += "<option value='C'>Cinema</option>"; 
    strInfoBox += "<option value='S'>Shopping Mall</option>";
    strInfoBox += "</select><br/>"; 
    strInfoBox += "</br><input type='button' value='Save' id='btnSend' 
                   onclick='SaveValues(this.form)' />"; 
    strInfoBox += "</br><input type='hidden' id='pointID' value='1'/>"; 
    strInfoBox += "</p></FORM>"; 
    return strInfoBox; 
}

最后，当用户将鼠标悬停在图钉上时，结果将是

VEDataCollection.JPG

保存信息

在形状描述部分中，我包含了一个名为“保存”的按钮，用于保存用户的选择。 在“保存”按钮的 onclick 事件中，我调用了 SaveValues() JavaScript 函数。 这位于页面 HTML 代码的 head 部分。

<script type="text/javascript"> 
    function SaveValues(form) 
    { 
        _pointID = parseFloat(form.pointID.value); 
        _description = form.descbox.value; 
        _type = form.type.value; 
        var tboxPointID = document.getElementById('txtPointID'); 
        if (tboxPointID) 
        { 
            tboxPointID.value = _pointID; 
        } 
        var tboxDesc = document.getElementById('txtDesc'); 
        if (tboxDesc) 
        { 
            tboxDesc.value = _description; 
        } 
        var tboxType = document.getElementById('txtType'); 
        if (tboxType) 
        { 
            tboxType.value = _type; 
        } 
        var btn = document.getElementById('btnSave'); 
        btn.click();
    } 
</script>

在 SaveValues 函数中，我将用户的选择保存到 JavaScript 变量中，然后将这些值设置到隐藏的文本框中。 您应该将下面的文本框包含在 HTML 文档中的 body 部分下

<input id="txtPointID" runat="server" type="hidden" /> 
<input id="txtDesc" runat="server" type="hidden" /> 
<input id="txtType" runat="server" type="hidden" />

然后，我在 ASPX 页面中触发 btnSave 按钮的 Click 事件。 btnSave 按钮是一个服务器端按钮，其高度和宽度设置为零，以便使其不可见。

<asp:Button ID="btnSave" runat="server" 
  Style="z-index: 100; position: relative; height: 0px; width: 0px;" 
  CausesValidation="False" 
  OnClick="btnSavePoint_Click" />

在按钮的 onClick() 事件中，我们访问数据并将其保存到数据库或任何其他媒体。 我将不在这里描述如何执行此操作，因为它超出了本文的范围。

protected void btnSavePoint_Click(object sender, EventArgs e) 
{
  string PointID = txtPointID.Value; 
  string Type = txtType.Value; 
  string Description = txtDesc.Value; 

  //Save into database 
}

完成。

关注点

btnSave 按钮的宽度和高度设置为零，以便使其不可见； 在 IE 中，这不会按预期工作，但 Firefox 给出了一个很好的结果。

© . All rights reserved.