5. 使用JS隔离封装Google地图 - densen2014/Blazor100 GitHub Wiki
开始学习 Maps JavaScript API 的最简单方法是查看一个简单示例。以下示例显示以澳大利亚新南威尔士州悉尼为中心的地图。
异步加载例子
JS代码
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly"
async
></script>
</body>
</html>
同步加载例子。我们省略了加载 API async 的标签中的属性script，也省略了回调参数。
JS代码
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Synchronous Loading</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=weekly"></script>
<script src="./index.js"></script>
</body>
</html>
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持，或 text-shadow，或其他任何你想要的功能。
由于blazor能运行的浏览器都是比较新的,所以我们不需要运行此polyfill.min.js脚本.
export function addScript(key, elementId, dotnetRef, backgroundColor, controlSize) {
if (!key || !elementId) {
return;
}
let url = "https://maps.googleapis.com/maps/api/js?key=";
let scriptsIncluded = false;
let scriptTags = document.querySelectorAll('head > script');
scriptTags.forEach(scriptTag => {
if (scriptTag) {
let srcAttribute = scriptTag.getAttribute('src');
if (srcAttribute && srcAttribute.startsWith(url)) {
scriptsIncluded = true;
return true;
}
}
});
if (scriptsIncluded) { //防止多次向页面添加 JS 脚本.Prevent adding JS scripts to page multiple times.
if (window.google) {
initMaps(elementId); //页面已导航. Page was navigated
}
return true;
}
url = url + key + "&callback=initGoogleMaps&libraries=&v=weekly";
let script = document.createElement('script');
script.src = url;
script.defer = true;
document.head.appendChild(script);
return false;
}
export function initMaps(elementId) {
var latlng = new google.maps.LatLng(40.26982, -3.758269);
var options = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(elementId, options);
console.log(map);
return map;
}
//Remove elementId with data
function removeElementIdWithDotnetRef(dict, elementId) {
for (let i = 0; i < dict.length; i++) {
if (dict[i].key === elementId) {
dict.splice(i, 1);
break;
}
}
}
//Dispose
export function dispose(elementId) {
if (elementId) {
let mapWithDotnetRef = getElementIdWithDotnetRef(_mapsElementDict, elementId);
mapWithDotnetRef.map = null;
mapWithDotnetRef.ref = null;
removeElementIdWithDotnetRef(_mapsElementDict, elementId);
}
}
将来也许会添加更多API封装,类似云盘/文档,所以建立文件夹备用.
由于不确定是否完成初始化,网络或者各种原因,故这里做了一个低级而万能的while循环检测map是否载入成功.如果各位小伙伴还有更优雅的方法,欢迎在底下留言,互通有无,cv万岁!
while (!(await Init()))
{
await Task.Delay(500);
}
其中一个参数是 [Parameter] public string? Key { get; set; },也就是你的 GoogleKey 在开发者后台可以获取,可以组件形式调用的时候设置, 不设置,即为空则在 IConfiguration 服务获取 "GoogleKey" , 默认在 appsettings.json 文件配置 "GoogleKey"="xxxxxxx"即可.
页面使用调用注入的服务IConfiguration使用如下代码
@inject IConfiguration config
完整代码如下
@implements IAsyncDisposable
@inject IJSRuntime JS
@namespace Blazor100.Components
@inject IConfiguration config
<div @ref="map" style="@Style">
</div>
<button class="btn btn-primary" type="button" onclick="@(async()=>await OnBtnClick())">Reset</button>
@code{
/// <summary>
/// 获得/设置 错误回调方法
/// </summary>
[Parameter]
public Func<string, Task>? OnError { get; set; }
/// <summary>
/// 获得/设置 GoogleKey<para></para>
/// 为空则在 IConfiguration 服务获取 "GoogleKey" , 默认在 appsettings.json 文件配置
/// </summary>
[Parameter]
public string? Key { get; set; }
/// <summary>
/// 获得/设置 style
/// </summary>
[Parameter]
public string Style { get; set; } = "height:700px;width:100%;";
ElementReference map { get; set; }
private IJSObjectReference? module;
private string key = String.Empty;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
key = Key ?? config["GoogleKey"];
module = await JS.InvokeAsync<IJSObjectReference>("import", "./lib/google/map.js");
while (!(await Init()))
{
await Task.Delay(500);
}
}
}
public async Task<bool> Init() => await module!.InvokeAsync<bool>("addScript", new object?[] { key, map, null, null, null });
public async Task OnBtnClick() => await module!.InvokeVoidAsync("addScript", new object?[] { key, map, null, null, null });
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
//await module.InvokeVoidAsync("destroy", Options);
await module.DisposeAsync();
}
}
}
代码后置是微软的一项技术，也是我们编写 .NET Core常用的编码方式。具体方式就像.razor和代码文件.cs两个文件相互关联构成一个页面。一般情况下，.razor文件中没有代码、只有组件和HTML代码，而在.cs文件中编写相关的代码。这样做的好处就是代码和页面内容分离，使代码更清晰。
现在尝试使用代码后置的写法,razor只写Html和路由
@page "/maps"
<h3>谷歌地图 Maps</h3>
<p>@message</p>
<Map OnError="@OnError" />
右键添加cs文件,命名为 MapsPage.razor.cs , 文件名命名方式为razor页面文件名全名后加.cs, 如果解决方案资源管理器默认开启了文件嵌套,这两个文件会合并在一起并且前面有三角符号,展开可看到后置的cs代码.
好了,现在终于可以正常愉快的写cs代码了,不用继续忍受VS2022的莫名其妙的红线和编辑razor文件带来的内存泄漏干扰, 😄 .
MapsPage.razor.cs 完整代码
using Blazor100.Components;
namespace Blazor100.Pages;
/// <summary>
/// 谷歌地图 Maps
/// </summary>
public sealed partial class MapsPage
{
private string message;
private Task OnError(string message)
{
this.message = message;
StateHasChanged();
return Task.CompletedTask;
}
}
@using Blazor100.Components
<div class="nav-item px-3">
<NavLink class="nav-link" href="maps">
谷歌地图
</NavLink>
</div>