如何在Blazor Web Assembly中设置Google Place自动填写地址表格？

问题描述

我在使Google的“地方自动完成地址表格”在Blazor Web Assembly应用程序中工作时遇到问题。

我正在使用Google的文档https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

我在index.html的底部包括了JavaScript。我有一个js文件，其中包含每个文档中的JavaScript，并且包含Google Api中的Places库。

<script src="js/googleAddressAutocomplete.js"></script>    
<script
    src="https://maps.googleapis.com/maps/api/js?key={MyApiKey}&callback=initAutocomplete&libraries=places&v=weekly"
    defer
></script>

在Blazor组件中，我使用与文档相同的标记。

<div id="locationField">
    <input
        id="autocomplete"
        placeholder="Enter your address"
        onFocus="@GeoLocate()"
        type="text"/>
</div>

除了我要调用的C＃方法之外，该方法使用JS Interop调用Geolocate函数。

private async Task GeoLocate()
{
    await JSRuntime.GeoLocate();
}

运行它时，我在控制台中收到此错误： InvalidValueError：不是HTMLInputElement的实例

看起来找不到输入元素，但是我不明白为什么。而且我不知道该怎么办。我使用的是Google文档中的相同代码，但是将其迁移到Blazor WASM。有人可以指出我正确的方向吗？ 谢谢， 戴夫

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）