如何通过转发器和数据库中的标记显示G映射

时间:2015-04-20 09:51:01

标签: javascript c# asp.net google-maps

我想在数据库值中显示转发器内的谷歌地图,我在谷歌上搜索并达到了这个结果但是没有和我合作我不知道是否有遗漏或不能帮助我。



<body>
    <form id="form1" runat="server">

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        
        <asp:Literal runat="server" ID="Literal1"></asp:Literal>
  
     <script type="text/javascript">
       
        var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
        <ItemTemplate>
                 {

                "title": '<%# Eval("City") %>',
                 "lat": '<%# Eval("Latitude") %>',
                 "lng": '<%# Eval("Longitude") %>'
                
             }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];

    </script>
    </body>
&#13;
&#13;
&#13;

这里我的代码是aspx.cs,

 public class Markers
{
    public string City { get; set; }
    public string Latitude { get; set; }
    public string Longitude { get; set; }
}


void GetData(string strRsult)
{
    XmlDataDocument xmlDataDoc = new XmlDataDocument();
    xmlDataDoc.LoadXml(strRsult);

    Literal1.Text = "<script type=\"text/javascript\">var markers = [";

    foreach (XmlNode n in xmlDataDoc.DocumentElement.GetElementsByTagName("Property"))
    {
        if (n.HasChildNodes)
        {
          List<Markers> markers = new List<Markers>();
            foreach (XmlNode childNode in n)
            {
                if (childNode.Name == "GEOData")
                {
                    Literal1.Text += "title: '" + childNode.Attributes["City"].Value + "', lat: '" + childNode.Attributes["Longitude"].Value + "', lng: '" + childNode.Attributes["Latitude"].Value + "'}";
                }

            }

            Literal1.Text += "];</script>";

        }

    }

&#13;
&#13;
XML file

- <AVSearch_PropertyDetails RequestedCurrency="EUR">
- <Property IDHotel="10000" PropertyCode="10000" Hotelname="REZ:Online HOTEL" StarCategory="0" ImageIdentifier="RHN_10000" NumberOfRooms="80" CheckinTime="00:00" CheckoutTime="23:59" Email="info@r-h-n.com" Status="0" StatusInfo="">
- <GEOData CountryCode="DE" CountryName="Germany" City="Duesseldorf" IDCity="32" Zip="40472" Street="Wanheimer Street 45" Longitude="6.7932130" Latitude="51.2871870">
- <Distances>
  <Distance Type="1" Distance="0.50" /> 
  <Distance Type="2" Distance="1.81" /> 
  </Distances>
  </GEOData>
- <Descriptions>
  <Description IDLanguage="4" IDType="1" Text="This is the test hotel used for testing and debugging purposes only. Please do not book this hotel." /> 
  <Description IDLanguage="4" IDType="4" Text="This is a testhotel" /> 
  <Description IDLanguage="4" IDType="3" Text="Terms & conditions EN" /> 
  </Descriptions>
`
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

从codeplex GoogleMapControl下载项目中的Google Map DLL。

在您的页面中注册DLL:

<%@ Register Assembly="Artem.Google" Namespace="Artem.Google.UI" TagPrefix="artem" %>

以下是在转发器控件中动态创建Google Map的步骤。

首先从this link下载Artem.Google.dll并在bin文件夹中放下DLL。

ASPX页码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GmapRepeater.aspx.cs" Inherits="GmapRepeater" %>

 <!DOCTYPE html>
 <%@ Register Assembly="Artem.Google" Namespace="Artem.Google.UI" TagPrefix="artem" %>

  <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
 <title></title>
   </head>
   <body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:Repeater ID="rptMarkers" runat="server" OnItemDataBound="rptMarkers_ItemDataBound">
    <ItemTemplate>
        <artem:GoogleMap ID="GMap" runat="server"></artem:GoogleMap>
    </ItemTemplate>
</asp:Repeater>
</div>
</form>

ASPX.CS代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Artem.Google.UI;

 public partial class GmapRepeater : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetData();
    }
}
protected void rptMarkers_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Markers loData = (Markers)e.Item.DataItem;
        GoogleMap GMap = (GoogleMap)e.Item.FindControl("GMap");

        GMap.MapType = Artem.Google.UI.MapType.Roadmap;
        GMap.ApiVersion = "v2";
        GMap.Latitude = Convert.ToDouble(loData.Latitude);
        GMap.Longitude = Convert.ToDouble(loData.Longitude);
        GMap.Zoom = 18;
        GMap.EnableMapTypeControl = false;
        GMap.Height = 200;
        GMap.Width = 195;

        Marker loMarker = new Marker();
        loMarker.Position.Latitude = Convert.ToDouble(loData.Latitude);
        loMarker.Position.Longitude = Convert.ToDouble(loData.Longitude);
        loMarker.Clickable = true;
        loMarker.Info = "Marker Information";
        loMarker.Title = "Title of your Marker";
        loMarker.Visible = true;

        GMap.Markers.Add(loMarker);
    }
}
 private void GetData()
{
    XmlDataDocument xmlDataDoc = new XmlDataDocument();
    xmlDataDoc.Load(Server.MapPath("~/Files/XMLFile.xml"));
    List<Markers> markers = new List<Markers>();

    foreach (XmlNode n in xmlDataDoc.DocumentElement.GetElementsByTagName("Property"))
    {
        if (n.HasChildNodes)
        {
            foreach (XmlNode childNode in n)
            {
                if (childNode.Name == "GEOData")
                {
                    Markers loObj = new Markers();
                    loObj.City = Convert.ToString(childNode.Attributes["City"].Value);
                    loObj.Longitude = Convert.ToString(childNode.Attributes["Longitude"].Value);
                    loObj.Latitude = Convert.ToString(childNode.Attributes["Latitude"].Value);
                    markers.Add(loObj);
                }
            }
        }
    }

    if (markers != null && markers.Count > 0)
    {
        rptMarkers.DataSource = markers;
        rptMarkers.DataBind();
    }
}
}

标记实体类:

public class Markers
{
     public string City { get; set; }
     public string Latitude { get; set; }
     public string Longitude { get; set; }
}

如果您有任何疑问,请与我们联系。