我需要在Map大头针顶部绘制文本。我不知道如何处理这个问题。尝试使用画布绘制,但我没有成功
我拥有的代码:
在Android端:
CustomMapHandler.cs
public class CustomMapHandler : MapHandler
{
public static readonly IPropertyMapper<IMap, IMapHandler> CustomMapper =
new PropertyMapper<IMap, IMapHandler>(Mapper)
{
[nameof(IMap.Pins)] = MapPins,
};
public CustomMapHandler() : base(CustomMapper, CommandMapper)
{
}
public CustomMapHandler(IPropertyMapper? mapper = null, CommandMapper? commandMapper = null) : base(
mapper ?? CustomMapper, commandMapper ?? CommandMapper)
{
}
public List<Marker> Markers { get; } = new();
protected override void ConnectHandler(MapView platformView)
{
base.ConnectHandler(platformView);
var mapReady = new MapCallbackHandler(this);
PlatformView.GetMapAsync(mapReady);
}
private static new void MapPins(IMapHandler handler, IMap map)
{
if (handler is CustomMapHandler mapHandler)
{
mapHandler.Markers.Clear();
mapHandler.AddPins(map.Pins);
}
}
private void AddPins(IEnumerable<IMapPin> mapPins)
{
if (Map is null || MauiContext is null)
{
return;
}
foreach (var pin in mapPins)
{
var pinHandler = pin.ToHandler(MauiContext);
if (pinHandler is IMapPinHandler mapPinHandler)
{
var markerOption = mapPinHandler.PlatformView;
if (pin is CustomPin cp)
{
cp.ImageSource.LoadImage(MauiContext, result =>
{
if (result?.Value is BitmapDrawable bitmapDrawable)
{
markerOption.SetIcon(BitmapDescriptorFactory.FromBitmap(bitmapDrawable.Bitmap));
}
AddMarker(Map, pin, Markers, markerOption);
});
}
else
{
AddMarker(Map, pin, Markers, markerOption);
}
}
}
}
private static void AddMarker(GoogleMap map, IMapPin pin, List<Marker> markers, MarkerOptions markerOption)
{
var marker = map.AddMarker(markerOption);
pin.MarkerId = marker.Id;
markers.Add(marker);
}
}
MapCallbackHandler.cs
class MapCallbackHandler : Java.Lang.Object, IOnMapReadyCallback
{
private readonly IMapHandler mapHandler;
public MapCallbackHandler(IMapHandler mapHandler)
{
this.mapHandler = mapHandler;
}
public void OnMapReady(GoogleMap googleMap)
{
mapHandler.UpdateValue(nameof(IMap.Pins));
}
}
CustomPin.cs
public class CustomPin : Pin
{
public static readonly BindableProperty ImageSourceProperty =
BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(CustomPin));
public ImageSource? ImageSource
{
get => (ImageSource?)GetValue(ImageSourceProperty);
set => SetValue(ImageSourceProperty, value);
}
}
MainPage.xaml.cs
void insertOnMap()
{
var customPinFromResource = new CustomPin()
{
Label = "From Resource",
Location = new Location(48.95049, 2.62891),
Address = "Address3",
ImageSource = ImageSource.FromFile("map_large_vertical_stopped_marker.png"),
Map = map
};
map.Pins.Add(customPinFromResource);
map.MoveToRegion(new MapSpan(new Location(48.95049, 2.62891), 48.95049, 2.62891));
}
MainPage.Xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps"
xmlns:charts="clr-namespace:TestMap.Charts"
x:Class="TestMap.MainPage">
<VerticalStackLayout>
<Map x:Name="map" HeightRequest="400" MapType="Street" IsVisible="true"/>
</VerticalStackLayout>
</ContentPage>
我拥有的
我需要的
以上代码之后尝试的所有操作都不起作用
1条答案
按热度按时间rekjcdws1#
似乎没有一个这样的解决方案可以解决这个问题与多平台的方法。在您的情况下,控制是一个引脚在Map上,而不是一个图像视图。所以您的问题更像是添加文本到图像中。
因此,你需要调用平台原生代码来完成这个操作,对于android,你可以参考writing text on an image xamarin android的例子,对于ios,你可以参考Xamarin.iOS Image on Image Watermark的例子,你需要做的是把图像水印改为文本水印。
另外,你也可以在原生ios或mac上google一下如何在图片中添加文字,比如how do I add text to an image in iOS Swift,你可以把原生代码转换成C#代码,因为你也可以在maui上找到相应的API。