Blazor组件自做六：使用JS隔离封装Baidu地图

AlexChow

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{    ///     /// 获得/设置 错误回调方法    ///     [Parameter]    public Func? OnError { get; set; }    ///     /// 获得/设置 BaiduKey    /// 为空则在 IConfiguration 服务获取 "BaiduKey" , 默认在 appsettings.json 文件配置    ///     [Parameter]    public string? Key { get; set; }    ///     /// 获得/设置 style    ///     [Parameter]    public string Style { get; set; } = "height:700px;width:100%;";    ///     /// 获得/设置 ID    ///     [Parameter]    public string ID { get; set; } = "container";    ///     /// 获得/设置 定位结果回调方法    ///     [Parameter]    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);        }    }    ///     /// 定位完成回调方法    ///     ///     ///     [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{    ///     /// Baidu定位数据类    ///     public class BaiduItem    {        ///         /// 状态        ///         ///         [DisplayName("状态")]        public string? Status { get; set; }        ///         /// 纬度        ///         ///         [DisplayName("纬度")]        public decimal Latitude { get; set; }        ///         /// 经度        ///         ///         [DisplayName("经度")]        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天

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！