使用 Google Maps API 的位置标记问题答案

【问题标题】：Location Marker Issue using Google Maps API使用 Google Maps API 的位置标记问题
【发布时间】：2015-10-30 16:59:51
【问题描述】：

我正在使用 Google Maps API 在 .Net 平台上显示位置标记。我已将纬度、经度、城市和州信息存储在数据库中，如果我为纬度和经度添加第 7 个数据库条目，我将面临地图和标记未显示的问题。

下面是.aspx的代码和后面的代码

.aspx：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
     <title>
         Google Map Locations
     </title>

     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=My_Key&sensor=false">
     </script>
</head>

<body onload="initialize()">
     <form id="form1" runat="server">
          <div id="mapArea" style="width: 700px; height: 700px;">
          </div>

           <asp:Label ID="Label11" runat="server"></asp:Label>
     </form>
</body>
</html>

代码隐藏：

namespace GoogleMaps
{
    public partial class GoogleMaps : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string markers = GetLocationMarkers();
            Label1.Text = @"
              <script type='text/javascript'>
                 function initialize() {

                 var mapOptions = {
                     center: new google.maps.LatLng(39.948427, -101.836428),
                     zoom: 2,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                 };

                 var myMap = new google.maps.Map(document.getElementById('mapArea'),
                             mapOptions);"
                  + markers +
                @"}
             </script>";
        }

        protected string GetLocationMarkers()
        {
            string markers = "";
            using (SqlConnection con = new
            SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConString"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand(
                                 "SELECT Latitude, Longitude, City FROM Map", con);
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                int i = 0;

                while (reader.Read())
                {
                    i++;
                    markers += @"var marker"+i.ToString()+ @" = 
                               new google.maps.Marker({                                                                                                            
                    position:google.maps.LatLng("+reader["Latitude"].ToString() +"
                    , "+
                    reader["Longitude"].ToString() +")," + 
                    @"map: myMap,title:'"+reader["City"].ToString()+
                   "'});";
                }
            }
            return markers;
        }
    }
}

在调试时，我发现，在标记 7 上，我在城市名称后看到 \r\n，在下面的调试输出中，示例：在 Pipestone 之后

markers "var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(32.692383, -114.626648),
      map: myMap, title:'Yuma'});
var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(38.250095, -122.040001),
      map: myMap, title:'Fairfield'});
var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(26.56225, -81.948121),
      map: myMap, title:'Cape Coral'});
var marker4 = new google.maps.Marker({
      position: new google.maps.LatLng(45.52263, -122.681208),
      map: myMap, title:'Portland'});
var marker5 = new google.maps.Marker({
      position: new google.maps.LatLng(37.810308, -85.981012),
      map: myMap, title:'Vine Grove'});
var marker6 = new google.maps.Marker({
      position: new google.maps.LatLng(28.540228, -81.385238),
      map: myMap, title:'Orlando'});
var marker7 = new google.maps.Marker({
      position: new google.maps.LatLng(43.99878, -96.313606),
      map: myMap, title:'Pipestone\r\n'});" string

但是当数据库中只有 6 个条目时，我在城市名称之后看不到 \r\n，示例：在下面的调试输出中：奥兰多之后

markers "var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(32.692383, -114.626648),
      map: myMap, title:'Yuma'});
var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(38.250095, -122.040001),
      map: myMap, title:'Fairfield'});
var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(26.56225, -81.948121),
      map: myMap, title:'Cape Coral'});
var marker4 = new google.maps.Marker({
      position: new google.maps.LatLng(45.52263, -122.681208),
      map: myMap, title:'Portland'});
var marker5 = new google.maps.Marker({
      position: new google.maps.LatLng(37.810308, -85.981012),
      map: myMap, title:'Vine Grove'});
var marker6 = new google.maps.Marker({
      position: new google.maps.LatLng(28.540228, -81.385238),
      map: myMap, title:'Orlando'});

什么可能导致 Google 地图不显示？数据库中只有 6 个条目，使用标记显示的地图没有问题。任何答案将不胜感激。

【问题讨论】：

不要使用标签将脚本放到您的页面上！只需将脚本放在页面标记 (.aspx) 上。如果您需要将服务器端的数据传递到脚本中，您可以通过隐藏字段将其注入或将其嵌入到标记页面上脚本中的变量中。

标签： c# asp.net google-maps google-maps-api-3

【解决方案1】：

可能是转义序列问题尝试仅选择第 7 个城市 Piperstone 以检查问题是否与字符串内容有关。在此标记中 si not show 尝试更新此条目删除 '\r\n' 字符

【讨论】：