Google Places API с Dart за пределами index.html - PullRequest
Новая
       7

Google Places API с Dart за пределами index.html

0 голосов
/ 26 июня 2018

Я пытаюсь настроить автозаполнение адреса Google Адресов в компоненте Dart.

Когда я копирую пример и помещаю код в файл index.html, он работает, когда я пытаюсь переместить детали или все это в компонент, он не работает. Есть ли какие-то проблемы, которые мне нужно решить? Я могу опубликовать репозиторий, если это необходимо, но, по сути, если я переместу input id="autocomplete" за пределы индексного файла, он не будет работать, я получу «js? Key = xxxx & библиотеки = места & callback = initAutocomplete: 42 InvalidValueError: не экземпляр HTMLInputElement».

Как мне заставить это работать в компоненте?

https://jsfiddle.net/d5f3k1mx/1/

Код ниже работает, но не работает, если я пытаюсь переместить любой HTML-код в компонент. Как я могу переместить HTML в компонент / шаблон?: 

    <!DOCTYPE html>
    <html>
    <head>
    <title>google_address</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script type="application/javascript">
        let autocomplete;
        const componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
        };
    </script>
    <script type="application/javascript">
        function initAutocomplete() {
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(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);
        }
    </script>
    <script type="application/javascript">
        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;
                }
            }

            var event = new CustomEvent('address', {detail:place});
            document.dispatchEvent(event);
        }
    </script>

    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxx&libraries=places&callback=initAutocomplete"
            async defer></script>
    <script defer src="main.dart.js"></script>
  </head>
  <body>
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>
<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
                                 disabled="true"></td>
    <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <!-- Note: Selection of address components in this example is typical.
         You may need to adjust it for the locations relevant to your app. See
         https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
    -->
    <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
                                 disabled="true"></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
                                             id="country" disabled="true"></td>
  </tr>
</table>
  <my-app>Loading...</my-app>
  </body>
  </html>
...