无法使用谷歌地图读取未定义的属性“纬度”

Question

我正在制作一个应用程序，其中我有资产数据库，我需要查看地图中具有某些参数的资产。我已经编写了代码，但是当我选择任何一个下拉框的值时，它会显示错误无法读取未定义的属性 'lat'。地图首先出现，但在我在下拉列表中选择某个值后，它就会消失。任何帮助将不胜感激。提前致谢。我也添加了cs文件和aspx文件。

 protected void Page_Load(object sender, EventArgs e)
      {
          if (!this.IsPostBack)
    {
        BindCS();
        BindCC();
        BindAG();
        List<LUT_Assets_Masters> dt = this.GetData();
        rptMarkers.DataSource = dt;
        rptMarkers.DataBind();
    }
}
private List<LUT_Assets_Masters> GetData()
{
    AssetTaggingEntities context = new AssetTaggingEntities();
    List<LUT_Assets_Masters> am1 = null;
    if (DDSearch.SelectedValue == "1" && DDStatus.SelectedIndex >= 0 && DDCondition.SelectedIndex >= 0 && DDGroup.SelectedIndex >= 0)
    {
        am1 = (from am in context.LUT_Assets_Masters
               where am.CSID == DDStatus.SelectedIndex
                     && am.CCID == DDCondition.SelectedIndex
                     && am.AGrpID == DDGroup.SelectedIndex
               select am).ToList();
    }

    else
    {
        am1 = (from am in context.LUT_Assets_Masters select am).ToList();
    }
    return am1;

}
protected void DDS_SelectedIndexChanged(object sender, EventArgs e)
{
    List<LUT_Assets_Masters> dt = this.GetData();
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
}

protected void DDGroup_SelectedIndexChanged(object sender, EventArgs e)
{
    List<LUT_Assets_Masters> dt = this.GetData();
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
}

protected void DDCondition_SelectedIndexChanged(object sender, EventArgs e)
{
    List<LUT_Assets_Masters> dt = this.GetData();
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
}

protected void DDStatus_SelectedIndexChanged(object sender, EventArgs e)
{
    List<LUT_Assets_Masters> dt = this.GetData();
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
}
protected void DDSearch_SelectedIndexChanged(object sender, EventArgs e)
{
    if (DDSearch.SelectedValue == "1")
    {
        Search.Visible = true;
        BArea.Visible = false;
    }

    if (DDSearch.SelectedValue == "2")
    {
        Search.Visible = false;
        BArea.Visible = true;
    }
}

aspx 文件

 <script async 
src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
 </script>

<script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
        <ItemTemplate>

 {
                "Name": '<%# Eval("AID") %>',
                "lat": '<%# Eval("Current_Location_Y") %>',
        "lng": '<%# Eval("Current_Location_X") %>',
            "description": '<%# Eval("Description") %>'
        }

</ItemTemplate>

  <SeparatorTemplate>

 ,
  </SeparatorTemplate>

   </asp:Repeater >

   ];
  </script>
<script type="text/javascript">                   
    window.onload = function initMap() {                                
        var mapOptions = {              
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),  
            zoom: 8,                                                     
            mapTypeId: google.maps.MapTypeId.ROADMAP         
        };
        var infoWindow = new google.maps.InfoWindow/*()*/;                   

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        for (i = 0; i < markers.length; i++) {                                   
            var data = markers[i]                                           
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);        
            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.Name);                     
                    infoWindow.open(map, marker);                     
                });
            })(marker, data);         
        }
    }

  </script>
<div id="DDmap" style="float:left; height: 200px">
 <div id="side" style=" background-color: white;
font-size: 18px;
text-align: center; padding: 50px 20px 50px 20px;" class="auto-style3">
                     <asp:DropDownList ID="DDSearch" runat="server" placeholder="Select By" text-align="center"  class="form-control"  Height="30px" style="float:right;"  Width="50%" margin="2px" AutoPostBack="True" OnSelectedIndexChanged="DDSearch_SelectedIndexChanged">
                     <asp:ListItem Selected="True" Value="0" Text="Select By"></asp:ListItem>
                     <asp:ListItem  Text="Locate" Value="1"></asp:ListItem>
                     <asp:ListItem  Text="Buffer" Value="2"></asp:ListItem>

                                       </asp:DropDownList>
                               <br />  <br />
           <br />  <br />
                        <asp:Panel ID="Search" runat="server" Visible="False">
              <label for ="Search" style="float:right">

                 <asp:DropDownList ID="DDCondition" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DDCondition_SelectedIndexChanged">
</asp:DropDownList>
                  <br /><br />
<asp:DropDownList ID="DDStatus" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DDStatus_SelectedIndexChanged">
</asp:DropDownList>
                  <br /><br />
                    <asp:DropDownList ID="DDGroup" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DDGroup_SelectedIndexChanged">
</asp:DropDownList>
              </label>
           <br /><br />
          </asp:Panel>
      </div>

Answer 1

在某些时候，您正试图读取对象的纬度，但对象本身是未定义的。 JavaScript 中的一行访问标记数组的第一个元素，而不检查数组是否为空：

var mapOptions = {              
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),  
    zoom: 8,                                                     
    mapTypeId: google.maps.MapTypeId.ROADMAP         
};

如果没有标记，则markers[0] 将评估为未定义，您将收到错误Cannot read property 'lat' of undefined。我建议先检查一下，如果列表为空，请提供默认纬度和经度：

var center = new google.maps.LatLng(0, 0);
if (markers.length > 0)
    center = new google.maps.LatLng(markers[0].lat, markers[0].lng);

var mapOptions = {              
    center: center,  
    zoom: 8,                                                     
    mapTypeId: google.maps.MapTypeId.ROADMAP         
};

看起来只要你在下拉列表中选择一个项目，下面的条件就成立了：

DDSearch.SelectedValue == "1" && DDStatus.SelectedIndex >= 0 && DDCondition.SelectedIndex >= 0 && DDGroup.SelectedIndex >= 0

因此，GetData() 不是返回所有 LUT_Asset_Masters，而是仅返回与您的过滤器匹配的 LUT_Asset_Masters，结果是一个空列表。您需要仔细检查该查询 - 确保您要查询的数据存在，并且查询返回您期望它返回的内容。