生成谷歌地图标记从数据库 [英] Generating Google Maps markers From Database

查看:111
本文介绍了生成谷歌地图标记从数据库的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好我试图填充谷歌地图V3与SQL Server数据库表的多个标记。

我现在的储蓄在一列中的经纬度位置叫这种格式38.425424,-5.477177

我的问题是标记不会出现在地图上。

\r
\r

脚本类型=文/ JavaScript的>\r
     VAR的标记= [\r
    < ASP:直放站ID =rptMarkers=服务器>\r
    <&ItemTemplate中GT;\r
                {\r
                    头衔:'<%#的eval(CUST_NAME)%>,\r
                    位置:'<%#的eval(位置)%GT;,\r
                说明:<%#的eval(说明)%GT;'\r
            }\r
< / ItemTemplate中>\r
< SeparatorTemplate>\r
    ,\r
< / SeparatorTemplate>\r
< / ASP:直放站>\r
 ];\r
< / SCRIPT>\r
<脚本类型=文/ JavaScript的>\r
    在window.onload =函数(){\r
        VAR的MapOptions = {\r
            中心:新google.maps.LatLng(标记[0] .Location)\r
            变焦:8,\r
            mapTypeId设为:google.maps.MapTypeId.ROADMAP\r
        };\r
        VAR信息窗口=新google.maps.InfoWindow();\r
        VAR地图=新google.maps.Map(的document.getElementById(dvMap)的MapOptions);\r
        对于(i = 0; I< markers.length;我++){\r
            VAR数据=标记[I]\r
            VAR myLatlng =新google.maps.LatLng(da​​ta.Location);\r
            VAR的标记=新google.maps.Marker({\r
                位置:myLatlng,\r
                地图:地图,\r
                标题:data.title\r
            });\r
            (函数(标记,数据){\r
                google.maps.event.addListener(标记,点击功能(E){\r
                    infoWindow.setContent(data.description);\r
                    infoWindow.open(地图,标记);\r
                });\r
            })(标记数据);\r
        }\r
    }\r
< / SCRIPT>

\r

< D​​IV CLASS =面板体ID =dvMap的风格= 高度:280像素; >\r
                                    \r
< / DIV>

\r

\r
\r

 保护无效的Page_Load(对象发件人,EventArgs的发送)
    {
                如果(!this.IsPostBack)
        {
            DataTable的DT = this.GetData(SELECT * FROM客户);
            rptMarkers.DataSource = DT;
            rptMarkers.DataBind();
        }    }    私人数据表的GetData(查询字符串)
    {
        字符串conString = ConfigurationManager.ConnectionStrings [连接]的ConnectionString。
        CMD的SqlCommand =新的SqlCommand(查询);
        使用(SqlConnection的CON =新的SqlConnection(conString))
        {
            使用(SqlDataAdapter的SDA =新SqlDataAdapter的())
            {
                cmd.Connection = CON;                sda.SelectCommand = CMD;
                使用(数据表DT =新的DataTable())
                {
                    sda.Fill(DT);
                    返回DT;
                }
            }
        }
    }


解决方案

您正在呈现标记'纬度和经度作为单个字符串。该 google.maps.LatLng()构造函数有两个参数,纬度一张双人床和一个用于经度。它看到你要存储都lat和长而且由于构造函数需要它们是两个独立的参数抛出一个运行时错误的字符串值。

而不是存储两个纬度和只要一个字段在数据库中,他们分成两个字段,那么它们分成数组中两个指标,然后分别将它们传递给google.maps.LatLng的相应参数()构造函数。

或者,如果你不能改变你的数据库模式,<一个href=\"http://stackoverflow.com/questions/96428/how-do-i-split-a-string-breaking-at-a-particular-character\">split单串入两个值它传递到构造函数之前。

Hi i am trying to populate Google Maps V3 with Multiple Markers from SQL Server Database table.

i am saving the latitude longitude in one column called Location in this format 38.425424, -5.477177

my problem is the markers do not appear in the map

script type="text/javascript">
     var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                    "title": '<%# Eval("Cust_Name") %>',
                    "Location": '<%# Eval("Location") %>',
                "description": '<%# Eval("description") %>'
            }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
 ];
</script>
<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].Location),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.Location);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>

<div class="panel-body" id="dvMap" style="height:280px;" >                                                            
                                    
</div>

protected void Page_Load(object sender, EventArgs e)
    {
                if (!this.IsPostBack)
        {
            DataTable dt = this.GetData("select * from Customer");
            rptMarkers.DataSource = dt;
            rptMarkers.DataBind();
        }

    }

    private DataTable GetData(string query)
    {
        string conString = ConfigurationManager.ConnectionStrings["connection"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;

                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }

解决方案

You're rendering the markers' latitude and longitude as a single string. The google.maps.LatLng() constructor takes two arguments, one double for latitude and one for longitude. It's seeing the single string value that you're storing both lat and long in and throwing a runtime error because the constructor requires them to be two separate arguments.

Instead of storing both lat and long as one field in your database, separate them into two fields, then split them into two indices in your array, then pass them individually to the corresponding parameters of the google.maps.LatLng() constructor.

Or if you can't change your database schema, split the single string into two values before passing it into the constructor.

这篇关于生成谷歌地图标记从数据库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆