@
目录地图组件在手机App中常用地理相关业务，如查看线下门店，设置导航，或选取地址等。是一个较为常见的组件。
在.NET MAUI 中，有两种方案可以集成高德地图，一种是使用原生库绑定。网上也有人实现过：https://blog.csdn.net/sD7O95O/article/details/125827031
但这种方案需要大量平台原生开发的知识，而且需要对每一个平台进行适配。
在这里我介绍第二种方案：.NET MAUI Blazor + 高德地图JS API 2.0 库的实现。
JS API 2.0 是高德开放平台基于WebGL的地图组件，可以将高德地图模块集成到.NET MAUI Blazor中的BlazorWebView控件，由于BlazorWebView的跨平台特性，可以达到一次开发全平台通用，无需为每个平台做适配。
今天用此方法实现一个地图选择器，使用手机的GPS定位初始化当前位置，使用高德地图JS API库实现地点选择功能。混合开发方案涉及本机代码与JS runtime的交互，如果你对这一部分还不太了解，可以先阅读这篇文章：[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发
使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。
前期准备：注册高德开发者并创建 key
登录控制台
登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者。
创建 key
进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。再创建一个Web服务类型的Key，用于解析初始位置地址。
获取 key 和密钥
创建成功后，可获取 key 和安全密钥。
创建项目
新建.NET MAUI Blazor项目，命名AMap
创建JS API Loader
前往https://webapi.amap.com/loader.js另存js文件至项目wwwroot文件夹
在wwwroot创建amap_index.html文件，将loader.js引用到页面中。创建_AMapSecurityConfig对象并设置安全密钥。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>AmapApp</title>
<base href="/" />
<link href="css/app2.css" rel="stylesheet" />
</head>
<body>
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">
标签：map,viewService,CurrentLocation,var,window,MAUI,new,Blazor,NET
From： https://www.cnblogs.com/jevonsflash/p/18091763