Javascript Google将自动完成API放在Blazor服务器端-InvalidValueError

我试图在Blazor服务器端项目上使用Google的Places Autocomplete API，但控制台中出现以下错误：

InvalidValueError: not an instance of HTMLInputElement
_.hd    @   js?key=AIzaSyBqbfM7v…initAutocomplete:61
_.kd    @   js?key=AIzaSyBqbfM7v…initAutocomplete:62
zu  @   js?key=AIzaSyBqbfM7v…initAutocomplete:20
initAutocomplete    @   googleAddressLookup.js:15
(anonymous) @   blazor.server.js:8
beginInvokeJSFromDotNet @   blazor.server.js:8
(anonymous) @   blazor.server.js:1
e.invokeClientMethod    @   blazor.server.js:1
e.processIncomingData   @   blazor.server.js:1
connection.onreceive    @   blazor.server.js:1
i.onmessage @   blazor.server.js:1

我只能假设这是blazor.server.js文件在某处阻塞了某些东西，因为我在blazor环境之外的Razor页面中使用了它。我的JavaScript知识非常有限

我的Google Autocomplete JS代码（我只做了一些小改动——大部分是直接从Google开发文档中获得的）：

我的一些表格（为简洁起见，其余部分略去）：

---

这与我在Razor页面上的工作版本之间的唯一区别是表单模型的@bind属性，而不是“…”的asp属性，以及使用JSInterop的需要，我认为我做得不对，但是我在其他地方找不到解决方案

您将wait Js.InvokeVoidAsync（“地理定位”）确切地称为何处@AliKianoor关于autocomplete输入的焦点-请参阅id为“autocomplete”的表单输入。我认为问题可能与这行代码有关，因为它与blazer无关，只是一个javascript元素未找到问题文档。getElementById（component）。value=''@Beau你有没有解决过让google place autocomplete使用blazor服务器的问题？不幸的是，我没有

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() {
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'), { types: ['geocode'] });

    autocomplete.setFields(['address_component', 'geometry']);

    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    var place = autocomplete.getPlace();

    document.getElementById('autocomplete').id = 'street_number';

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

    document.getElementById("hidden_lat_input").value = place.geometry.location.lat();
    document.getElementById("hidden_lng_input").value = place.geometry.location.lng();

    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;
        }
    }

    document.getElementById('street_number').id = 'autocomplete';
}

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 src="_framework/blazor.server.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={APIKEY}&libraries=places&callback=initAutocomplete" async defer></script>
<script src="~/js/googleAddressLookup.js"></script>

private async Task GeoLocate()
{
    await Js.InvokeVoidAsync("geolocate");
}

                    <div id="addressInput" class="@AddressInputsCss">
                        <input @bind="Advert.Address.Latitude" hidden id="hidden_lat_input" />
                        <input @bind="Advert.Address.Longitude" hidden id="hidden_lng_input" />


                        <div class="form-group mb-4">
                            <input @bind="Advert.Address.Address1" id="autocomplete"
                                   @onfocus="(async () => await GeoLocate())" class="form-control shadow-sm" placeholder="Address *" />
                        </div>

                        <div class="form-group mb-4">
                            <input @bind="Advert.Address.Address2" class="form-control shadow-sm" id="route" placeholder="Address 2 (Optional)" />
                        </div>


                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-4">
                                    <input @bind="Advert.Address.City" class="form-control shadow-sm" id="locality" placeholder="City/Town" />
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-4">
                                    <input @bind="Advert.Address.State" class="form-control shadow-sm" id="administrative_area_level_1" placeholder="State" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-4">
                                    <input @bind="Advert.Address.Country" class="form-control shadow-sm" id="country" placeholder="Country *" />
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-4">
                                    <input @bind="Advert.Address.PostCode" class="form-control shadow-sm" id="postal_code" placeholder="Postal Code *" />
                                </div>
                            </div>
                        </div>
                    </div>