将dropdownlist值传递给Google Map JavaScript

Question

我有一个javascript代码，它被解雇后会根据我在文本框和下拉菜单中输入的地址为我提供纬度和经度。问题出在下拉菜单中，因为当我替换下拉菜单（即ddlState和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中输入地址， State的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');
});