Blazor组件自做六：使用JS隔离封装Baidu地图
1. 运行截图演示地址 https://blazor.app1.es/baidumap
DemoSSR
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
LocationReset@code{ /// /// 获得/设置 错误回调方法 /// public Func? OnError { get; set; } /// /// 获得/设置 BaiduKey /// 为空则在 IConfiguration 服务获取 "BaiduKey" , 默认在 appsettings.json 文件配置 /// public string? Key { get; set; } /// /// 获得/设置 style /// public string Style { get; set; } = "height:700px;width:100%;"; /// /// 获得/设置 ID /// public string ID { get; set; } = "container"; /// /// 获得/设置 定位结果回调方法 /// public Func? OnResult { get; set; } private IJSObjectReference? module; private DotNetObjectReference? 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("import", "./lib/baidu/baidumap.js"); InstanceGeo = DotNetObjectReference.Create(this); while (!(await Init())) { await Task.Delay(500); } //await module!.InvokeVoidAsync("initMaps"); } } public async Task Init() => await module!.InvokeAsync("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); /// /// 获取定位 /// public virtual async Task GetLocation() { try { await module!.InvokeVoidAsync("geolocation", InstanceGeo); } catch (Exception e) { if (OnError != null) await OnError.Invoke(e.Message); } } /// /// 定位完成回调方法 /// /// /// 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{ /// /// Baidu定位数据类 /// public class BaiduItem { /// /// 状态 /// /// public string? Status { get; set; } /// /// 纬度 /// /// public decimal Latitude { get; set; } /// /// 经度 /// /// public decimal Longitude { get; set; } }}5. Pages文件夹添加BaiduMapPage.razor文件,用于演示组件调用.
BaiduMapPage.razor
@page "/baidumap"百度地图 Baidu Map
@message
BaiduMapPage.razor.cs
using Blazor100.Components;namespace Blazor100.Pages;/// /// 百度地图 BaiduMap/// 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. 首页引用组件演示页或者Shared/NavMenu.razor添加导航
百度地图
8. F5运行程序
至此,使用JS隔离封装Baidu地图大功告成! Happy coding!
Blazor组件自做系列
Blazor组件自做一 : 使用JS隔离封装viewerjs库
Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做三 : 使用JS隔离封装ZXing扫码
Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
Blazor组件自做五：使用JS隔离封装谷歌地图
Blazor组件自做六：使用JS隔离封装Baidu地图
Blazor组件自做七：使用JS隔离制作定位/持续定位组件
Blazor组件自做八：使用JS隔离封装屏幕键盘kioskboard.js组件
项目源码Github|Gitee
https://github.com/densen2014/Blazor100
https://gitee.com/densen2014/Blazor100
Blazor100: Blazor入门100天
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]