国、都市、地区の3つのドロップダウンリストがあり、最初の空白の選択値と1つのHTMLページにGoogleマップがあります。ユーザーがドロップダウンリストから場所の値を選択するときに、地図を中央に配置してズームインしようとしています。
だからここに私が問題に直面するシナリオがあります:
- ユーザーは国のドロップダウンリストから国を選択します。
- ドロップダウンリストが変更された後、選択した値を取得する必要があります。
- Googleマップを更新するためにイベントを発生させます
onchangeイベントとchangejavascriptイベントを使用しようとしましたが、どちらもドロップダウンリストから取得したテキストの値が、空のテキスト(最初の空白のテキスト)をGoogleマップに送信するイベントの前のテキストの値になりました。
では、ドロップダウンリストが変更された後にイベントを発生させるにはどうすればよいですか?
そしてここに私のコードがあります:
<asp:DropDownList ID="DropDownList_Country" runat="server" Height="29px" Width="209px"
Font-Size="18px" CausesValidation="false" onchange="MapLocationUpdater();">
function MapLocationUpdater() {
var address = getDropdownListAddress();
geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(11);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
}
);
}
function getDropdownListAddress() {
var ddlCountry = document.getElementById("<%=DropDownList_Country.ClientID%>");
var ddlCity = document.getElementById("<%=DropDownList_City.ClientID%>");
var ddlDistrict = document.getElementById("<%=DropDownList_District.ClientID%>");
var CountryTxt = ddlCountry.options[ddlCountry.selectedIndex].text;
var CityTxt = ddlCity.options[ddlCity.selectedIndex].text;
var DistrictTxt = ddlDistrict.options[ddlDistrict.selectedIndex].text;
return CountryTxt + " " + CityTxt + " " + DistrictTxt;
}