Google maps 如何在Uno WASM中实现谷歌地图

我是Uno平台的新手，我需要帮助将谷歌地图添加到我的应用程序中。因为MapControl不提供WASM支持，所以我似乎需要嵌入一个javascript组件。根据法律，这应该是可能的。但我似乎不能让它工作

我有一个javascript文件，其中包含以下内容，直接取自谷歌地图官方网站。也不确定映射API键放在哪里

// Initialize and add the map
function initMap() {
    // The location of Uluru
    const uluru = { lat: -25.344, lng: 131.036 };
    // The map, centered at Uluru
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: uluru,
    });
    // The marker, positioned at Uluru
    const marker = new google.maps.Marker({
        position: uluru,
        map: map,
    });
}

我也有这个类，尝试过类似于官方的Uno平台嵌入Javascript组件指南

    public class GoogleMapsController : FrameworkElement
    {
        public GoogleMapsController()
        {
            LoadJavaScript();
        }

        private async void LoadJavaScript()
        {
            await this.ExecuteJavascriptAsync("initMap()");
        }

    }

要在xaml页面中显示地图，请执行以下操作：

<local:GoogleMapsController x:Name="googlemaps" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" />

---

如果它成功了，我以后可能会写一篇关于它的博客文章

获取谷歌地图API密钥 关于如何通过Google开发者控制台获取API密钥，您可以按照web上提供的任何教程进行操作。它包括创建一个项目，添加所需的账单信息，创建API密钥，然后为其启用Google Maps API当您计划公开时，请确保限制API密钥，以免有人滥用您的密钥用于他们的目的，并以这种方式使用您的账单。

向WASM项目添加自定义

index.html

因为GoogleMaps需要加载一个外部JavaScript库，所以在应用程序首次加载之前加载它是很有用的。为此，向WASM项目的根目录添加一个

index.html

文件，其中包含以下内容：

$（附加）
$（额外开支）
此应用程序需要启用Javascript和WebAssembly

请注意，大多数代码都是样板文件，这是Uno WASM项目中的默认代码（请参阅）。用开发者控制台中的API密钥替换

MYAPIKEY

现在您需要指示WASM引导程序使用此自定义

index.html

。双击解决方案资源管理器中的

.csproj

，并添加以下内容：

<PropertyGroup>
   <WasmShellIndexHtmlPath>index.html</WasmShellIndexHtmlPath>
</PropertyGroup>

注意：我使用一个自定义的唯一变量名来存储由GoogleMapsAPI创建的map对象。您可以使用此变量名来操作映射，并对其调用一些函数

使用元素 最后，您可以在应用程序中使用以下元素：

结果

---

您是否在浏览器开发人员控制台中看到一些警告/错误？另外，请向上投票，以增强对

MapControl

的未来支持。使用控制台中的消息/警告编辑了此帖子。错误消息似乎指出未加载google地图库。你能试着参照这一步吗：？似乎不能让它工作。尝试过像这样加载gmap，但仍然发现谷歌没有定义。似乎我需要使用“require”，但不确定。谢谢！它起作用了

dotnet.js:1 Error #1 "ReferenceError: google is not defined" executing javascript: "
put_char @ dotnet.js:1
dotnet.js:1 (function(element) {
put_char @ dotnet.js:1
dotnet.js:1 initMap()
put_char @ dotnet.js:1
dotnet.js:1 })(Uno.UI.WindowManager.current.getView(38002));
put_char @ dotnet.js:1
dotnet.js:1 "

<PropertyGroup>
   <WasmShellIndexHtmlPath>index.html</WasmShellIndexHtmlPath>
</PropertyGroup>