Blazor组件自做六 : 使用JS隔离封装Baidu地图
1. 运行截图
2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件
2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > script 元素添加到页面文档,使用异步加载回调 initMapsG 方法初始化地图.
var map = null;
var containerid = null;
export function addScript(key, elementId, dotnetRef, backgroundColor, controlSize) {
if (!key || !elementId) {
return;
}
containerid = elementId;
let url = "https://api.map.baidu.com/api?v=3.0&ak=";
let scriptsIncluded = false;
let scriptTags = document.querySelectorAll('body > script');
scriptTags.forEach(scriptTag => {
if (scriptTag) {
let srcAttribute = scriptTag.getAttribute('src');
if (srcAttribute && srcAttribute.startsWith(url)) {
scriptsIncluded = true;
return true;
}
}
});
if (scriptsIncluded) {
initMapsG();
return true;
}
url = url + key + "&callback=initMapsG";
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
return false;
}2.2 初始化地图方法.
export function resetMaps(elementId) {
initMaps(elementId);
}
function initMapsG() {
initMaps(containerid);
}
function initMaps(elementId) {
// 创建地图实例
map = new BMap.Map(elementId, {
coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。指定完成后API将以指定的坐标类型处理您传入的坐标
});
// 创建点坐标
var point = new BMap.Point(116.47496, 39.77856);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
// 仅当设置城市信息时，MapTypeControl的切换功能才能可用
map.setCurrentCity("北京");
}2.3 百度地定位图API,并开启SDK辅助定位.
export function geolocation(wrapper) {
var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function (r) {
let geolocationitem;
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
let lng = r.point.lng;
let lat = r.point.lat;
geolocationitem= {
"Longitude":lng,
"Latitude" : lat,
"Status": '您的位置：' + r.point.lng + ',' + r.point.lat
};
}
else {
geolocationitem= {
"Longitude": 0,
"Latitude": 0,
"Status": 'failed' + this.getStatus()
};
}
wrapper.invokeMethodAsync('GetResult', geolocationitem);
return geolocationitem;
});
}3. 打开Components文件夹 , 新建baidu文件夹, 新建BaiduMap.razor文件
razor代码
@implements IAsyncDisposable
@inject IJSRuntime JS
@namespace Blazor100.Components
@inject IConfiguration config
<div id="@ID" style="@Style"></div>
<button class="btn btn-primary" type="button" onclick="@(async()=>await GetLocation())">Location</button>
<button class="btn btn-primary" type="button" onclick="@(async()=>await ResetMaps())">Reset</button>
@code{
/// <summary>
/// 获得/设置 错误回调方法
/// </summary>
[Parameter]
public Func<string, Task>? OnError { get; set; }
/// <summary>
/// 获得/设置 BaiduKey<para></para>
/// 为空则在 IConfiguration 服务获取 "BaiduKey" , 默认在 appsettings.json 文件配置
/// </summary>
[Parameter]
public string? Key { get; set; }
/// <summary>
/// 获得/设置 style
/// </summary>
[Parameter]
public string Style { get; set; } = "height:700px;width:100%;";
/// <summary>
/// 获得/设置 ID
/// </summary>
[Parameter]
public string ID { get; set; } = "container";
/// <summary>
/// 获得/设置 定位结果回调方法
/// </summary>
[Parameter]
public Func<BaiduItem, Task>? OnResult { get; set; }
private IJSObjectReference? module;
private DotNetObjectReference<BaiduMap>? InstanceGeo { get; set; }
private string key = String.Empty;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
key = Key ?? config["BaiduKey"];
module = await JS.InvokeAsync<IJSObjectReference>("import", "./lib/baidu/baidumap.js");
InstanceGeo = DotNetObjectReference.Create(this);
while (!(await Init()))
{
await Task.Delay(500);
}
//await module!.InvokeVoidAsync("initMaps");
}
}
public async Task<bool> Init() => await module!.InvokeAsync<bool>("addScript", new object?[] { key, ID, null, null, null });
public async Task OnOptionsChanged(ViewerOptions options) => await module!.InvokeVoidAsync("init", options);
public async Task ResetMaps() => await module!.InvokeVoidAsync("resetMaps", ID);
public async Task OnBtnClick(string btn) => await module!.InvokeVoidAsync(btn);
/// <summary>
/// 获取定位
/// </summary>
public virtual async Task GetLocation()
{
try
{
await module!.InvokeVoidAsync("geolocation", InstanceGeo);
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
/// <summary>
/// 定位完成回调方法
/// </summary>
/// <param name="geolocations"></param>
/// <returns></returns>
[JSInvokable]
public async Task GetResult(BaiduItem geolocations)
{
try
{
if (OnResult != null) await OnResult.Invoke(geolocations);
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
//await module.InvokeVoidAsync("destroy", Options);
await module.DisposeAsync();
}
}
} 4. Components/baidu文件夹 , 新建文件夹, 新建BaiduItem.cs文件
Baidu定位数据类
using System;
using System.ComponentModel;
namespace Blazor100.Components
{
/// <summary>
/// Baidu定位数据类
/// </summary>
public class BaiduItem
{
/// <summary>
/// 状态
/// </summary>
/// <returns></returns>
[DisplayName("状态")]
public string? Status { get; set; }
/// <summary>
/// 纬度
/// </summary>
/// <returns></returns>
[DisplayName("纬度")]
public decimal Latitude { get; set; }
/// <summary>
/// 经度
/// </summary>
/// <returns></returns>
[DisplayName("经度")]
public decimal Longitude { get; set; }
}
}5. Pages文件夹添加BaiduMapPage.razor文件,用于演示组件调用.
BaiduMapPage.razor
@page "/baidumap"
<h3>百度地图 Baidu Map</h3>
<p>@message</p>
<BaiduMap OnError="@OnError" OnResult="@OnResult" />BaiduMapPage.razor.cs
using Blazor100.Components;
namespace Blazor100.Pages;
/// <summary>
/// 百度地图 BaiduMap
/// </summary>
public sealed partial class BaiduMapPage
{
private string message;
private BaiduItem baiduItem;
private Task OnResult(BaiduItem geolocations)
{
baiduItem = geolocations;
this.message = baiduItem.Status;
StateHasChanged();
return Task.CompletedTask;
}
private Task OnError(string message)
{
this.message = message;
StateHasChanged();
return Task.CompletedTask;
}
}6. _Imports.razor加入一行引用组件的命名空间.
@using Blazor100.Components7. 首页引用组件演示页 <BaiduMapPage /> 或者 Shared/NavMenu.razor 添加导航
<div class="nav-item px-3">
<NavLink class="nav-link" href="baidumap">
百度地图
</NavLink>
</div>8. F5运行程序
至此,使用JS隔离封装Baidu地图大功告成! Happy coding!
Blazor组件自做系列
Blazor组件自做一 : 使用JS隔离封装viewerjs库
Blazor组件自做四: 使用JS隔离封装signature_pad签名组件
Blazor组件自做五: 使用JS隔离封装Google地图<03-24>
Blazor组件自做六: 使用JS隔离封装Baidu地图<03-25>
Blazor组件自做七: 使用JS隔离制作定位/持续定位组件<03-26>
Blazor组件自做八: 使用JS隔离封装屏幕键盘kioskboard.js组件<03-27>
项目源码 Github | Gitee
手机扫一扫
移动阅读更方便
你可能感兴趣的文章