Question

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

aspx文件

<div class="CustomList-customListContainer"><!-- react-empty: 292 --><section class="CustomList-header"><div class="CustomList-headerCont"><div class="CustomList-heartIcon"><img class="CustomList-imageTag" src="/static-listing/images/heart.svg" alt=""></div><div class="CustomList-Settings"></div><div class="CustomList-ListHeading"><button class="CustomList-ListHeading">My Favorites</button></div></div><div class="CustomList-itemsCount"><button class="CustomList-totalItems">7 items</button></div></section><div class="CustomList-imageContainer" style="width: 50%; height: 100%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%; background: rgb(241, 243, 244);"><a href="/savedlist?id=myFavorites" style="
    width: 100%;
    height: 100%;
    display: block;
"><div class="CustomList-productsCount"><!-- react-text: 327 -->+ <!-- /react-text --><!-- react-text: 328 -->3<!-- /react-text --></div></a></div></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，而这只是一个空列表。您需要仔细检查该查询 - 确保您查询的数据存在，并且查询返回您希望返回的内容。

无法使用谷歌地图读取未定义的属性'lat'

1 个答案: