2016-05-04 40 views
0

これに関連してかなりの質問がありますが、私のことはかなり具体的です。私はオンライン記事の例を使用しています。ここに私のコードです:私はこれを実行するとGoogleマップ、C#、ASP.net、SQL Serverを使用してマーカーで地図を表示する。地図は表示されません

<%@ 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; 
     } 
    } 
} 

の背後にあるコード、マップは、単に空白のページが表示されていません。リテラル1のC#コードをHTML/Aspページに配置すると、マップがロードされます(ただし、マーカーは配置されません)。私はちょうど1枚が欠けているように感じる。私は本当に何か提案を感謝します。

ありがとうございます。

+0

を作品

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

を参照してください。ペーストされたタグ全体をタイトルにコピーするだけです。 –

答えて

2

一重引用符「 '」をプログラミングするのではなく、一重引用符「'」を使用したようです。

は簡単にあなたの問題を記述するために、あなたのタイトルを編集してください、次の変更されたコードは、

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; 
} 
+1

信じられない。良い目。助けてくれてありがとう! – bairdmar

関連する問題