Google maps api als Teilansicht in asp.net mvc5 Anwendung

-1

Ich habe in meiner asp.net mvc5 Anwendung dieser Teilansicht:Google maps api als Teilansicht in asp.net mvc5 Anwendung

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

<script type="text/javascript"> 
    var placeSearch, autocomplete; 
    var componentForm = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'short_name', 
     country: 'long_name', 
     postal_code: 'short_name' 
    }; 

    function initAutocomplete() { 
     // Create the autocomplete object, restricting the search to geographical 
     // location types. 
     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), 
      { types: ['geocode'] }); 

     // When the user selects an address from the dropdown, populate the address 
     // fields in the form. 
     autocomplete.addListener('place_changed', fillInAddress); 
    } 

    function fillInAddress() { 
     // Get the place details from the autocomplete object. 
     var place = autocomplete.getPlace(); 

     for (var component in componentForm) { 
      document.getElementById(component).value = ''; 
      document.getElementById(component).disabled = false; 
     } 

     // Get each component of the address from the place details 
     // and fill the corresponding field on the form. 
     for (var i = 0; i < place.address_components.length; i++) { 
      var addressType = place.address_components[i].types[0]; 
      if (componentForm[addressType]) { 
       var val = place.address_components[i][componentForm[addressType]]; 
       document.getElementById(addressType).value = val; 
      } 
     } 
    } 

    function geolocate() { 
     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 
       }); 
       autocomplete.setBounds(circle.getBounds()); 
      }); 
     } 
    } 
</script> 

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

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

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

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

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


</body> 
</html>

Welche google map api verwendet. Ich brauche diese Teilansicht viele Male in meiner Ansicht Zum Beispiel wie dieses ich diese Ausnahme erhalten

<div class="tab-content"> 

    <div class="tab-pane active" id="tab_beginplace"> @Html.Partial("_GeoApi") 
    </div> 

    <div class="tab-pane active" id="tab_endplace"> @Html.Partial("_GeoApi") 
    </div> 
</div>

machen:

Sie die Google Maps API mehrere Male auf dieser Seite aufgenommen haben. Dies kann zu unerwarteten Fehlern führen

Und die Autovervollständigung funktioniert nicht seit der zweiten Teilansicht Rendern.

Also muss ich wissen, wie kann ich das beheben?

Quelle

2016-03-24 Lamloumi Afif

Skripts sollten niemals in Teilansichten sein. Verschieben Sie sie in Ihre Ansicht (oder in Ihr Layout), damit sie nur einmal generiert werden. Und ändern Sie alle Ihre Steuerelemente, um Klassennamen zu verwenden (entfernen Sie die ID-Attribute, damit Sie kein ungültiges HTML generieren) –

Alle Ihre Skripte sollten nur einmal enthalten sein. Dies bedeutet, dass Sie sie nicht als Teil einer Teilansicht verwenden können, die Sie mehrfach auf derselben Seite verwenden möchten. Sie müssen Skriptteile in eine separate .js-Datei einfügen und sie einmal rendern.

Auch Ihre Teilansicht sollte <html> und <body> Tags nicht enthalten, sollte es Teilansicht, nicht ganz Sicht. Sie wollen nicht der endgültige Code wie folgt aussehen:

<html> 
... main page code ... 
    <html>...partial view code 1....</html> 
    <html>...partial view code 2....</html> 
    <html>...partial view code 3....</html> 
</html>

Das ist kein gültiges HTML-Dokument.

Und schließlich Ihre Teilansichten sollten keine Elemente mit statischem id-Attribute verwenden, denn wenn man das zweimal auf der Seite macht, wird Ihr Code mehr als ein Element mit der gleichen ID, die eindeutig sein sollte ...

Aktualisierung: Um statische IDs durch dynamische IDs zu ersetzen, verwenden Sie ein Modell, in dem Sie die Informationen übergeben, die Sie benötigen. Anstatt also mit

@Html.Partial("_GeoApi")

werden Sie schreiben

@Html.Partial("_GeoApi", model)

Dann in Ihrem Teilansicht Code, werden Sie mit

@model MyModel

und das übergebene Modell wird die Instanz von MyModel starten Klasse.

Quelle

2016-03-24 09:03:03 Wapac

ok danke, aber das Codebeispiel ist erforderlich, um die ID jedes Tags https://developers.google.com/maps festzulegen/documentation/javascript/examples/places-autocomplete-addressform und sogar ich versuche diese Methode, Wert nach Klassennamen zu erhalten, fehlgeschlagen –

Ja, Sie müssen ID verwenden, aber Sie möchten nicht statische ID verwenden, weil wenn nicht funktioniert . Sie möchten dynamische ID verwenden, was bedeutet, dass Sie für jedes partielle Ansichtsrendering eine neue ID erstellen, also anstelle von "id =" autocomplete "" in beiden Fällen "id =" autocomplete1 "' in erster Instanz und 'id =" autocomplete2 "' in der Sekunde. – Wapac

Wie kann ich das tun, ich meine, wie kann ich eine dynamische ID zu einem Tag in geteilten Teilansicht festlegen? –

Google maps api als Teilansicht in asp.net mvc5 Anwendung

Antwort

Verwandte Themen