mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-11-29 18:49:08 +08:00
update
This commit is contained in:
jx
parent
5d5c7d0d31
commit
a0df26c41f
@ -1,5 +1,31 @@
|
||||
@page "/baidumaps"
|
||||
<h3>BaiduMaps</h3>
|
||||
@inject VersionService VersionManager
|
||||
|
||||
<h3>百度地图</h3>
|
||||
|
||||
<h4>用于调用百度地图完成最基本的操作</h4>
|
||||
|
||||
<p><b>注意事项：</b></p>
|
||||
|
||||
<p>本组件依赖于 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.BaiduMap' target='_blank'><code>BootstrapBlazor.BaiduMap</code></a>，使用本组件时需要引用其组件包</p>
|
||||
|
||||
<p><b>Nuget 包安装</b></p>
|
||||
|
||||
<p>使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.BaiduMap' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.BaiduMap</code> 组件的安装</p>
|
||||
|
||||
<div class="code-label">.NET CLI</div>
|
||||
<Pre class="no-highlight">dotnet add package BootstrapBlazor.BaiduMap --version @Version</Pre>
|
||||
|
||||
<div class="code-label">PackageReference</div>
|
||||
<Pre class="no-highlight"><PackageReference Include="BootstrapBlazor.BaiduMap" Version="@Version" /></Pre>
|
||||
|
||||
<div class="code-label">Package Manager</div>
|
||||
<Pre class="no-highlight">Install-Package BootstrapBlazor.BaiduMap -Version @Version</Pre>
|
||||
|
||||
<DemoBlock Title="基本用法" Introduction="直接调用百度地图控件" Name="Normal">
|
||||
<Tips>请自行获取百度地图的Ak，不要使用示例程序中的，示例程序中的Ak随时可能失效。</Tips>
|
||||
<BaiduMap Ak="u1MD7sjDBc5EUTUnAYGOAueQruwdn5bD" Center="new MapPoint(116.404, 39.915)" Zoom="14" Markers="@Markers"
|
||||
MarkerClick="MarkerClick" style="width:800px;height:800px"></BaiduMap>
|
||||
</DemoBlock>
|
||||
|
||||
<BaiduMap Ak="u1MD7sjDBc5EUTUnAYGOAueQruwdn5bD" Center="new MapPoint(116.404, 39.915)" Zoom="12" style="width:800px;height:800px"></BaiduMap>
|
||||
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
|
||||
// Website: https://www.blazor.zone or https://argozhang.github.io/
|
||||
|
||||
using BootstrapBlazor.Components;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace BootstrapBlazor.Shared.Samples;
|
||||
|
||||
/// <summary>
|
||||
@ -9,5 +12,43 @@ namespace BootstrapBlazor.Shared.Samples;
|
||||
/// </summary>
|
||||
public partial class BaiduMaps
|
||||
{
|
||||
private List<BaiduMarker>? Markers { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private MessageService? MessageService { get; set; }
|
||||
|
||||
private string Version { get; set; } = "fetching";
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
Markers = new List<BaiduMarker>()
|
||||
{
|
||||
new BaiduMarker() { Name = "marker1", Point = new MapPoint(116.404, 39.925), Icon = new BaiduMapIcon()
|
||||
{
|
||||
Size = new MapSize(20, 20), Url = "http://localhost:50853/favicon.png"
|
||||
}},
|
||||
new BaiduMarker() { Name = "marker2", Point = new MapPoint(116.404, 39.915), EnableClick = true},
|
||||
new BaiduMarker() { Name = "marker3", Point = new MapPoint(116.395, 39.935), EnableClick = true},
|
||||
new BaiduMarker() { Name = "marker4", Point = new MapPoint(116.415, 39.931), InfoWindow = new BaiduMapInfoWindow()
|
||||
{
|
||||
Content = "BootStrapBlazor BaiduMap",
|
||||
Size = new MapSize(50, 50),
|
||||
Title = "BootStrapBlazor"
|
||||
}},
|
||||
};
|
||||
Version = await VersionManager.GetVersionAsync("bootstrapblazor.baidumap");
|
||||
}
|
||||
|
||||
private async Task MarkerClick(string name)
|
||||
{
|
||||
await MessageService.Show(new MessageOption()
|
||||
{
|
||||
Content = $"{name}被点击了！"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,41 @@
|
||||
export function bb_baidu_map(el, value, method, obj) {
|
||||
|
||||
if (method === "init"){
|
||||
console.log(value)
|
||||
LoadBaiduMapScript(value.mapUrl).then((BMapGL) => {
|
||||
console.log(BMapGL);
|
||||
var map = new BMapGL.Map(value.id);
|
||||
map.centerAndZoom(new BMapGL.Point(value.center.x, value.center.y), value.zoom); // 初始化地图,设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(value.enableScrollWheelZoom); // 开启鼠标滚轮缩放
|
||||
if (value.markers) {
|
||||
for (const marker of value.markers) {
|
||||
var icon = {}
|
||||
if(marker.icon) {
|
||||
icon['icon'] = new BMapGL.Icon(marker.icon.url, new BMapGL.Size(marker.icon.size.width, marker.icon.size.height));
|
||||
}
|
||||
var point = new BMapGL.Point(marker.point.x, marker.point.y);
|
||||
var mapMarker = new BMapGL.Marker(point, icon);
|
||||
map.addOverlay(mapMarker);
|
||||
if (marker.enableClick) {
|
||||
mapMarker.addEventListener('click', function () {
|
||||
obj.invokeMethodAsync('Click', marker.name);
|
||||
});
|
||||
}else if(marker.infoWindow) {
|
||||
mapMarker.addEventListener('click', function () {
|
||||
var infoWindow = new BMapGL.InfoWindow(marker.infoWindow.content, {
|
||||
width: marker.infoWindow.size.width,
|
||||
height: marker.infoWindow.size.height,
|
||||
title: marker.infoWindow.title
|
||||
});
|
||||
map.openInfoWindow(infoWindow, point);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function LoadBaiduMapScript(url) {
|
||||
//console.log("初始化百度地图脚本...");
|
||||
const BMap_URL = url + "&callback=onBMapCallback";
|
||||
return new Promise((resolve, reject) => {
|
||||
// 如果已加载直接返回
|
||||
@ -23,7 +45,6 @@ function LoadBaiduMapScript(url) {
|
||||
}
|
||||
// 百度地图异步加载回调处理
|
||||
window.onBMapCallback = function () {
|
||||
console.log("百度地图脚本初始化成功...");
|
||||
resolve(BMapGL);
|
||||
};
|
||||
// 插入script脚本
|
||||
|
||||
@ -3,6 +3,3 @@
|
||||
|
||||
<div id="@Id" @attributes="@AdditionalAttributes" @ref="MapElement"></div>
|
||||
|
||||
@code {
|
||||
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
// Website: https://www.blazor.zone or https://argozhang.github.io/
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace BootstrapBlazor.Components;
|
||||
|
||||
@ -36,6 +37,18 @@ public partial class BaiduMap
|
||||
[Parameter]
|
||||
public bool? EnableScrollWheelZoom { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// 覆盖物列表
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public List<BaiduMarker>? Markers { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 覆盖物点击事件
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public EventCallback<string> MarkerClick { get; set; }
|
||||
|
||||
private BaiduMapOption Option { get; set; } = new BaiduMapOption();
|
||||
|
||||
[NotNull]
|
||||
@ -57,6 +70,7 @@ public partial class BaiduMap
|
||||
Option.MapUrl = $"//api.map.baidu.com/api?type=webgl&v=1.0&ak={Ak}";
|
||||
Option.Id = Id;
|
||||
Option.EnableScrollWheelZoom = EnableScrollWheelZoom;
|
||||
Option.Markers = Markers;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
@ -72,4 +86,18 @@ public partial class BaiduMap
|
||||
await Module.InvokeVoidAsync("bb_baidu_map", MapElement, Option, "init");
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 覆盖物点击事件回调
|
||||
/// </summary>
|
||||
/// <param name="markerName"></param>
|
||||
/// <returns></returns>
|
||||
[JSInvokable]
|
||||
public async Task Click(string markerName)
|
||||
{
|
||||
if (MarkerClick.HasDelegate)
|
||||
{
|
||||
await MarkerClick.InvokeAsync(markerName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
|
||||
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
|
||||
// Website: https://www.blazor.zone or https://argozhang.github.io/
|
||||
|
||||
namespace BootstrapBlazor.Components;
|
||||
|
||||
/// <summary>
|
||||
/// 百度地图图标
|
||||
/// </summary>
|
||||
public class BaiduMapIcon
|
||||
{
|
||||
/// <summary>
|
||||
/// 图标Url
|
||||
/// </summary>
|
||||
public string? Url { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 图标大小
|
||||
/// </summary>
|
||||
public MapSize? Size { get; set; }
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
|
||||
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
|
||||
// Website: https://www.blazor.zone or https://argozhang.github.io/
|
||||
|
||||
namespace BootstrapBlazor.Components;
|
||||
|
||||
/// <summary>
|
||||
/// 弹窗内容
|
||||
/// </summary>
|
||||
public class BaiduMapInfoWindow
|
||||
{
|
||||
/// <summary>
|
||||
/// 窗口大小
|
||||
/// </summary>
|
||||
public MapSize Size { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 窗口标题
|
||||
/// </summary>
|
||||
public string? Title { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 窗口内容
|
||||
/// </summary>
|
||||
public string? Content { get; set; }
|
||||
|
||||
}
|
||||
@ -34,4 +34,9 @@ public class BaiduMapOption
|
||||
/// 是否开启滚轮缩放，默认为true
|
||||
/// </summary>
|
||||
public bool? EnableScrollWheelZoom { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 覆盖物列表
|
||||
/// </summary>
|
||||
public List<BaiduMarker>? Markers { get; set; }
|
||||
}
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
|
||||
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
|
||||
// Website: https://www.blazor.zone or https://argozhang.github.io/
|
||||
|
||||
namespace BootstrapBlazor.Components;
|
||||
|
||||
/// <summary>
|
||||
/// 基本标记物
|
||||
/// </summary>
|
||||
public class BaiduMarker
|
||||
{
|
||||
|
||||
/// <summary>
|
||||
/// 标记点名称，回调使用
|
||||
/// </summary>
|
||||
public string? Name { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 标记点位置
|
||||
/// </summary>
|
||||
public MapPoint? Point { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 图标，为空则不显示
|
||||
/// </summary>
|
||||
public BaiduMapIcon? Icon { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 是否启用点击回调，启用则不能弹窗
|
||||
/// </summary>
|
||||
public bool EnableClick { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 信息弹窗，当启用回调时无效
|
||||
/// </summary>
|
||||
public BaiduMapInfoWindow? InfoWindow { get; set; }
|
||||
}
|
||||
@ -9,6 +9,26 @@ namespace BootstrapBlazor.Components;
|
||||
/// </summary>
|
||||
public struct MapSize
|
||||
{
|
||||
/// <summary>
|
||||
/// 构造
|
||||
/// </summary>
|
||||
public MapSize()
|
||||
{
|
||||
Width = null;
|
||||
Height = null;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 构造
|
||||
/// </summary>
|
||||
/// <param name="width"></param>
|
||||
/// <param name="height"></param>
|
||||
public MapSize(double width, double height)
|
||||
{
|
||||
Width = width;
|
||||
Height = height;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 宽度
|
||||
/// </summary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user