如何在Xamarin Form中通过地图标记展示店铺位置？

项目背景 #

我正在做毕业设计项目，包含Web和移动端两个平台：

• Web端：管理员可向数据库录入店铺信息，字段包括店铺名称、经营产品、店铺位置
• 移动端：我负责开发，其中地图模块需要实现：
  1. 以当前位置为中心，用红色圆圈标记「附近」范围
  2. 在地图上显示已入驻系统的店铺标记

已完成的地图相关代码 #

XAML代码 #

<maps:Map  
    x:Name="myMap"
    MapType="Hybrid"
    IsShowingUser="True"
/>

C#代码（map.xaml.cs） #

public MapPage()
{
    InitializeComponent();
    DisplayCurrentLocation();
    // this.AddMarkerInCurrentLocation();
}

public async void DisplayCurrentLocation()
{
    try
    {
        var request = new GeolocationRequest(GeolocationAccuracy.Medium);
        var location = await Geolocation.GetLocationAsync(request);
        if (location != null)
            
        {
           Position p = new Position(location.Latitude, location.Longitude);
          MapSpan mapSpan = MapSpan.FromCenterAndRadius(p, Distance.FromKilometers(.444));
           myMap.MoveToRegion(mapSpan);
       
        }                      
    
    }
    catch(FeatureNotSupportedException fnsEx)
    {

    }
    catch   
        (FeatureNotEnabledException fneEx)
    { 

    }
    catch(Exception ex)
    {

    }
}

实现剩余功能的核心步骤指导 #

1. 添加「附近」范围红色圆圈 #

• 利用Circle类创建圆形覆盖物，设置中心为当前位置、半径为目标范围（比如你已用的0.444公里），并设置填充颜色为半透明红色、边框颜色为红色
• 将创建好的Circle添加到myMap.MapElements集合中（Xamarin.Forms Maps组件的标准操作）

2. 加载并显示店铺标记 #

• 从后端接口获取已入驻店铺的位置数据（包含名称、产品、经纬度）
• 遍历店铺数据，为每个店铺创建Pin对象：设置Position为店铺经纬度，Label为店铺名称，Address为经营产品或位置信息
• 将所有Pin添加到myMap.Pins集合中，地图会自动渲染这些标记

内容的提问来源于stack exchange，提问作者helloSir