Question

我有一个javascript代码，在触发时会根据我在文本框中输入的地址给出纬度和经度。下拉列表。问题在于下拉列表，因为当我替换下拉列表（即ddlState＆amp; ddlCity）时，代码工作正常。我猜我无法从下拉列表中提取所选值。这是我的javascript：

   <td class="unmaintable1">Street Address :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2"><asp:TextBox ID="txtStreetAddress" runat="server" Width="576px"></asp:TextBox>
   </td>
   <td class="unmaintable1">Landmark :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2"><asp:TextBox ID="txtLandmark" runat="server" Width="576px">Optional</asp:TextBox>
   </td>
   <td class="unmaintable1">State :&nbsp;&nbsp; </td>
   <td class="mergedunmaintable23" colspan="2">
   <asp:UpdatePanel runat="server">
   <ContentTemplate>
   <table cellpadding="0" cellspacing="0" class="updatepaneltable">
   <tr>
   <td class="unmaintable2"><asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True" DataTextField="StateName" DataValueField="StateId" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" Width="160px">
   </asp:DropDownList></td>
   <td class="unmaintable3"> City : <asp:DropDownList ID="ddlCity" runat="server" Width="160px">
   </asp:DropDownList></td>
   </tr>
   </table>
   </ContentTemplate> 
   </asp:UpdatePanel>
   </td>
   <td class="unmaintable1">Zip Code :&nbsp;&nbsp; </td>
   <td class="unmaintable2">
   <asp:TextBox ID="txtZipCode" runat="server" Width="154px"></asp:TextBox>
   </td>
   <td class="unmaintable3"><span class="auto-style33">Country&nbsp;:</span>
   <asp:DropDownList ID="ddlCountry" runat="server" Width="160px">
   <asp:ListItem>India</asp:ListItem>
   </asp:DropDownList>
   </td>
   <td class="unmaintable2">
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&key=AIzaSyDVk87DSFyZlxmYAM8NPNr8sZPN60FYLNA"></script>
   <script type="text/javascript">
   function calculateCoordinates() {

                    var txtStreetAddress = document.getElementById('<%= txtStreetAddress.ClientID%>');
                    var txtLandmark = document.getElementById('<%= txtLandmark.ClientID%>');
                    var ddlCity = document.getElementById('<%= ddlCity.ClientID%>');
                    var txtzip = document.getElementById('<%= txtZipCode.ClientID%>');
                    var ddlState = document.getElementById('<%= ddlState.ClientID%>');
                    var txtLatitude = document.getElementById('<%= txtLatitude.ClientID%>');
                    var txtLongitude = document.getElementById('<%= txtLongitude.ClientID%>');

                    var address = txtStreetAddress.value + ', ';
                    address += txtLandmark.value + ', ';
                    address += ddlCity.value + ', ';
                    address += txtzip.value + ', ';
                    address += ddlState.value;

                    var geocoder;
                    geocoder = new google.maps.Geocoder();

                    geocoder.geocode({ address: address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var location = results[0].geometry.location;
                            txtLatitude.value = location.lat();
                            txtLongitude.value = location.lng();
                        }
                        else
                            alert(searchString + ' - not found');
                    });
                }
    </script>
              <asp:TextBox ID="txtLatitude" runat="server" Width="154px"></asp:TextBox>
                          </td>
             <td class="unmaintable3"><span class="auto-style33">Longitude :</span>
             <asp:TextBox ID="txtLongitude" runat="server" Width="154px"></asp:TextBox>
                          </td>
             <td class="unmaintable4">
                        <input id="btnCalculateCoordinates" type="button" value="Calculate Coordinates" onclick="calculateCoordinates();" />
                          </td>

Answer 1

我的猜测是，即使你没有在asp:TextBox txtStreetAddress 中输入地址，状态的asp:DropDownList也使用非空的默认值，例如'AL'（按字母顺序排列在列表中的第一个州），并且您将其作为地址的一部分传递给我们。

您的请求可能如下所示：

的 maps.googleapis.com/maps/api/geocode/json?address = ,, AL ,,

总是返回相同的结果，即

{ "results" : [ { "formatted_address" : "Alabama, USA", "geometry" : { "location" : { "lat" : 32.3182314, "lng" : -86.902298 }, } } ], "status" : "OK" }

您的要求应如下：

<强> maps.googleapis.com/maps/api/geocode/json?address = ,,,,

不会返回结果。

向您添加一个默认的空列表项下拉列表，如：

<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True" DataTextField="StateName" DataValueField="StateId" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" Width="160px"> <asp:ListItem></asp:ListItem> </asp:DropDownList>

<强>更新

我看了一下你的javascript，我发现了一个会导致你描述的行为的错误。

如果您发送有效地址，您将收到结果，这些行将执行：

var location = results[0].geometry.location; txtLatitude.value = location.lat(); txtLongitude.value = location.lng();

现在txtLatitude和txtLongitude有值。但是，如果您随后发送了无效的地址，则该行执行：

alert(searchString + ' - not found');

但txtLatitude和txtLongitude仍有其原始值。您必须重置它们，因此请更改您的代码，如：

geocoder.geocode({ address: address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var location = results[0].geometry.location; txtLatitude.value = location.lat(); txtLongitude.value = location.lng(); } else { txtLatitude.value = ''; txtLongitude.value = ''; alert(searchString + ' - not found'); });

将下拉列表值传递给谷歌地图javascript

1 个答案: