使用谷歌地图、C#、ASP.net、SQL Server显示带有标记的地图.地图未显示

Using Google Maps, C#, ASP.net, SQL Server to show Map with Markers. Map not displayed

本文关键字：显示 地图 Server 谷歌地图 ASP SQL net      更新时间：2023-09-26

我知道有很多问题与此有关，但我的问题很具体。我用的是一篇网上文章中的一个例子。这是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GoogleMapsAPItesting.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Google Maps Markers</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=InsertAPIKeyhere&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
}
</script>
</head>
<body onload="initialize()">
<form id="WebForm1" runat="server">
<div id="mapArea" style="width: 500px; height: 500px;">
</div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</form>
</body>
</html>

以及C#背后的代码

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
namespace GoogleMapsAPItesting
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string markers = GetMarkers();
            Literal1.Text = @"
<script type=’text/javascript’>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.3213, 77.5435),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById(‘mapArea’),
mapOptions);" + markers + @"}
</script>";
        }

        protected string GetMarkers()
        {
            string markers = "";
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString =
            "Data Source=FakeServer;" +
            "Initial Catalog=FakeInitCatalog;" +
            "User id=FakeUID;" +
            "Password=FakePass;";
            {
                SqlCommand cmd = new SqlCommand("SELECT Latitude, Longitude, City FROM Locations", conn);
                conn.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                int i = 0;
                while (reader.Read())
                {
                    i++;
                    markers +=
                    @"var marker" + i.ToString() + @" = new google.maps.Marker({
position: new google.maps.LatLng(" + reader["Latitude"].ToString() + ", " +
                    reader["Longitude"].ToString() + ")," +
                    @"map: myMap,
title:’" + reader["City"].ToString() + "’});";
                }
            }
            return markers;
        }
    }
}

当我运行这个程序时，地图不会显示，只是一个空白页面。如果我将C#代码作为literal1，并将其放置在HTML/Asp页面中，则会加载映射（但不会放置标记）。我觉得我只是少了一块。我真的很感激你的建议。

谢谢。

您似乎使用了排版单引号"'"而不是编程单引号"。

参见

... script type=’text/javascript’ ... document.getElementById(‘mapArea’) ... title:’" + reader["City"].ToString() + "’

以下修改后的代码适用于

protected void Page_Load(object sender, EventArgs e)
{
    string markers = GetMarkers();
    Literal1.Text = @"
<script type='text/javascript'>
function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(28.3213, 77.5435),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById('mapArea'),
    mapOptions);" + markers + 
@"
}
</script>";
}

protected string GetMarkers()
{
    string markers = "";
    float latitude = 28.3213f;
    float longitude = 77.5435f;
    for (var i = 0; i < 10; i++)
    {
        i++;
        markers +=
        @"var marker" + i.ToString() + @" = new google.maps.Marker({
        position: new google.maps.LatLng(" + (latitude + i).ToString() + ", " +
        (longitude + i).ToString() + ")," +
        @"map: myMap,
        title:'" + "City" + i.ToString() + "'});";
    }
    return markers;
}
相关文章：