整合多地方自动填充地址表单

时间：2016-03-25 05:39:11

标签： javascript c# jquery asp.net google-maps-api-3

我希望在我看来将Place Autocomplete Address Form夫妻时间添加为部分视图：

部分视图_GeoApi 

 @model int

  <p><input type="text" onfocus="geolocate(@Model)" placeholder="Taper l'adresse"  id="@("autocomplete" + Model)" class=" fiche" name="nomlieu_adress" style="width:500px"></p>

    <p>
        <label style="width:90px">Avenue</label><input type="text" class=" fiche" id="@("street_number"+Model)" name="avenue_adress" style="width:160px; " />
        <label style="width:90px">Rue</label><input type="text" class=" fiche"   id="@("route" + Model)" name="rue_adress" style="width:157px" />
    </p>

    <p> <label style="width:90px">Ville(*)</label><input type="text" class=" fiche"   id="@("locality" + Model)" name="ville_adress" style="width:410px" required /> </p>

    <p>
        <label style="width:90px">Etat(*)</label><input type="text"   id="@("administrative_area_level_1" + Model)" class=" fiche" name="etat_adress" style="width:160px" required />
        <label style="width:90px">Code Postal(*)</label><input type="text"   id="@("postal_code" + Model)" class=" fiche" name="code_postal_adress" style="width:157px" required />
    </p>

    <p> <label style="width:90px">Pays(*)</label><input type="text"   id="@("country" + Model)" class=" fiche" name="pays_adress" style="width:410px" required /></p>

主视图 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&libraries=places&callback=initAutocomplete" async defer></script>
<script src="~/Scripts/DemandeClient/AjouterDemande.js"></script>

<div class="tab-pane" id="tab_1">
    <form class="editForm">

      @Html.Partial("_GeoApi",1)

    </form>
</div>
..............................
<div class="tab-pane" id="tab_2">
    <form class="editForm">

      @Html.Partial("_GeoApi",2)

    </form>
</div>
..................................
<div class="tab-pane" id="tab_3">
    <form class="editForm">

      @Html.Partial("_GeoApi",3)

    </form>
</div>

脚本 

var placeSearch, autocomplete1, autocomplete2, autocomplete3;
var componentForm1 = {
    street_number1: 'short_name',
    route1: 'long_name',
    locality1: 'long_name',
    administrative_area_level_11: 'short_name',
    country1: 'long_name',
    postal_code1: 'short_name'
};

var componentForm2 = {
    street_number2: 'short_name',
    route2: 'long_name',
    locality2: 'long_name',
    administrative_area_level_12: 'short_name',
    country2: 'long_name',
    postal_code2: 'short_name'
};

var componentForm3 = {
    street_number3: 'short_name',
    route3: 'long_name',
    locality3: 'long_name',
    administrative_area_level_13: 'short_name',
    country3: 'long_name',
    postal_code3: 'short_name'
};

    function initAutocomplete() {

        console.log("initAutocomplete");

        try {
            autocomplete1 = new google.maps.places.Autocomplete((document.getElementById('autocomplete1')), { types: ['geocode'] });
            autocomplete1.addListener('place_changed', fillInAddress(1));

            autocomplete2 = new google.maps.places.Autocomplete((document.getElementById('autocomplete2')), { types: ['geocode'] });
            autocomplete2.addListener('place_changed', fillInAddress(2));

            autocomplete3 = new google.maps.places.Autocomplete((document.getElementById('autocomplete3')), { types: ['geocode'] });
            autocomplete3.addListener('place_changed', fillInAddress(3));
        } catch (e) {
            console.log("exception from initAutocomplete = " + e.message);
        }



    }


    function fillInAddress(numb) {

        console.log("fillInAddress (" + numb + ")");

        try {

        if (numb == 1)
        {
             var place = autocomplete1.getPlace(); 
             for (var component in componentForm1) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }

            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm1[addressType]) {
                    var val = place.address_components[i][componentForm1[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }

            if (numb == 2)
            {
                var place  = autocomplete2.getPlace(); 
                for (var component in componentForm2) {
                    document.getElementById(component).value = '';
                    document.getElementById(component).disabled = false;
                }

                for (var i = 0; i < place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    if (componentForm2[addressType]) {
                        var val = place.address_components[i][componentForm2[addressType]];
                        document.getElementById(addressType).value = val;
                    }
                }
            }

                if (numb == 3)
                {
                    var place = autocomplete3.getPlace(); 
                    for (var component in componentForm3) {
                        document.getElementById(component).value = '';
                        document.getElementById(component).disabled = false;
                    }

                    for (var i = 0; i < place.address_components.length; i++) {
                        var addressType = place.address_components[i].types[0];
                        if (componentForm3[addressType]) {
                            var val = place.address_components[i][componentForm3[addressType]];
                            document.getElementById(addressType).value = val;
                        }
                    }
                }


        } catch (e) {
            console.log("exception from fillInAddress (" + numb + ") = " + e.message);
        }

    }



    function geolocate(numb) {

        console.log("geolocate (" + numb + ")");

        try {
            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });

                    if (numb == 1) autocomplete1.setBounds(circle.getBounds());
                    if (numb == 2) autocomplete2.setBounds(circle.getBounds());
                    if (numb == 3) autocomplete3.setBounds(circle.getBounds());
                });
            }
        } catch (e) {
            console.log("exception from geolocate (" + numb + ") = " + e.message);
        }

    }

当我运行应用程序时，我在加载中遇到了这些错误

  
    

initAutocomplete

  
     

fillInAddress（1）

     来自fillInAddress（1）的

异常=无法读取属性   ＆＃39; address_components＆＃39;未定义的

     

fillInAddress（2）

     来自fillInAddress（2）的

异常=无法读取属性   ＆＃39; address_components＆＃39;未定义的

     

fillInAddress（3）

     来自fillInAddress（3）的

异常=无法读取属性   ＆＃39; address_components＆＃39;未定义的

当我专注于第一个自动填充表单时，我收到消息geolocate (1)但是当我选择一个地方时会出现此异常：

  ？

JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4＆安培;库=地方＆安培;回调= initAutocomplete：104   未捕获的TypeError：无法读取属性＆＃39; apply＆＃39;的   undefined_.J.trigger @   JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4和放大器;图书馆=地方和放大器;回调= initAutocomplete：104sb   @   JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4和放大器;图书馆=地方和放大器;回调= initAutocomplete：38sb   @   JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4和放大器;图书馆=地方和放大器;回调= initAutocomplete：38_.t.set   @   JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4＆安培;库=地方＆安培;回调= initAutocomplete：106（匿名   功能）@   JS键= AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4和放大器;图书馆=地方和放大器;回调= initAutocomplete：52（匿名   函数）@ places_impl.js：24（匿名函数）@   places_impl.js：14（匿名函数）@ places_impl.js：8（匿名   函数）@ common.js：43（匿名函数）@ common.js：34（匿名   函数）@ common.js：43d @ common.js：39（匿名函数）@   PlaceService.GetPlaceDetails 2sfr-FR＆安培; 8sChIJ0XsDKGqKfg0RovjXq-O-QHE＆安培; 10E3＆安培;键= AIzaSyBCVSBoBAUjAfb-的Pfx ...：1

所以我需要知道：

  1. 这些例外的原因是什么？
  2. 我该如何解决？

0 个答案:

没有答案
相关问题
最新问题