Haritada ilgi çekici noktaları görüntüleme

2025-05-30

Önemli

UWP MapControl ve Windows Haritalar platform API'leri (Windows.Services.Maps.*) kullanım dışıdır ve Windows'un gelecekteki sürümlerinde kullanılamayabilir. Daha fazla bilgi için bkz. Kullanım dışı bırakılan özellikler için kaynaklar.

Önemli

Bing Maps for Enterprise hizmetinin kullanımdan kaldırılması

UWP MapControl ve Windows.Services.Maps ad alanlarındaki harita hizmetleri Bing Haritalar'a dayanır. Bing Kurumsal Haritalar kullanımdan kaldırılmıştır ve kullanımdan kaldırılacaktır. Bu noktada MapControl ve hizmetler artık veri almaz.

Daha fazla bilgi için Bing Haritalar Geliştirici Merkezi ve Bing Haritalar belgelerine bakın.

Uyarı

MapControl ve harita hizmetleri, MapServiceTokenadlı bir haritalar kimlik doğrulama anahtarı gerektirir. Haritalar kimlik doğrulama anahtarını alma ve ayarlama hakkında daha fazla bilgi için bkz. Haritalar kimlik doğrulama anahtarı isteme.

Raptiyeler, görüntüler, şekiller ve XAML kullanıcı arabirimi öğelerini kullanarak haritaya ilgi çekici noktalar (POI) ekleyin. POI, haritada ilgi çekici bir şeyi temsil eden belirli bir noktadır. Örneğin, bir işletmenin, şehrin veya arkadaşınızın konumu.

MapElementsLayer nesnesinin MapElements koleksiyonuna MapIcon, MapBillboard, MapPolygon ve MapPolyline nesneleri ekleyerek raptiyeleri, görüntüleri ve şekilleri haritada görüntüleyin. Ardından bu katman nesnesini harita denetiminin Katmanlar koleksiyonuna ekleyin.

Uyarı

Önceki sürümlerde bu kılavuzda MapElements koleksiyonuna harita öğelerinin nasıl ekleneceği gösterildi. Bu yaklaşımı kullanmaya devam edebilirsiniz ancak yeni harita katmanı modelinin bazı avantajlarını kaçıracaksınız. Daha fazla bilgi edinmek için bu kılavuzun Katmanlarla çalışma bölümüne bakın.

Ayrıca düğme, HyperlinkButtonveya TextBlock gibi XAML kullanıcı arabirimi öğelerini MapItemsControl veya MapControlöğelerinin altında görüntüleyebilirsiniz.

Haritaya yerleştirecek çok sayıda öğeniz varsa,harita üzerinde kutucuklu görüntülerin yer paylaşımını düşünün. Yolları haritada görüntülemek için bkz. Yolları ve yol tariflerini görüntüleme

Bir raptiye ekle

MapIcon sınıfını kullanarak harita üzerinde raptiye benzeri bir görüntüyü ve isteğe bağlı metni görüntüleyin. varsayılan görüntüyü kabul edebilir veya Görüntü özelliğini kullanarak özel bir görüntü sağlayabilirsiniz. Aşağıdaki görüntü, Title özelliği için hiçbir değer belirtilmediğinde, kısa bir başlıkla, uzun bir başlıkla ve çok uzun bir başlıkla, MapIcon için varsayılan görüntüyü gösterir.

farklı uzunlukta başlıklara sahip örnek mapicon.

Aşağıdaki örnek Seattle şehrinin bir haritasını gösterir ve Space Needle'ın konumunu belirtmek için varsayılan görüntü ve isteğe bağlı bir başlık içeren bir MapIcon ekler. Ayrıca haritayı simgenin üzerine ortalar ve yakınlaştırır. Harita denetimini kullanma hakkında genel bilgi için bkz. 2B, 3B ve Streetside görünümleriyle haritaları görüntüleme.

public void AddSpaceNeedleIcon()
{
    var MyLandmarks = new List<MapElement>();

    BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
    Geopoint snPoint = new Geopoint(snPosition);

    var spaceNeedleIcon = new MapIcon
    {
        Location = snPoint,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        ZIndex = 0,
        Title = "Space Needle"
    };

    MyLandmarks.Add(spaceNeedleIcon);

    var LandmarksLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarks
    };

    myMap.Layers.Add(LandmarksLayer);

    myMap.Center = snPoint;
    myMap.ZoomLevel = 14;

}

Bu örnek, haritada aşağıdaki POI'yi görüntüler (ortada varsayılan görüntü).

haritası mapicon ile

Aşağıdaki kod satırı, projenin Assets klasörüne kaydedilmiş özel bir görüntüyle MapIcon görüntüler. MapIcon Image özelliği, randomaccessstreamreferencetüründe bir değer bekler. Bu tür için, Windows.Storage.Streams ad alanında deyimini kullanan bir gereklidir.

Uyarı

Birden çok harita simgesi için aynı görüntüyü kullanıyorsanız, en iyi performans için sayfa veya uygulama düzeyinde RandomAccessStreamReference bildirin.

    MapIcon1.Image =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

MapIcon sınıfıyla çalışırken şu noktaları göz önünde bulundurun:

Görüntü özelliği 2048×2048 piksel maksimum görüntü boyutunu destekler.
Varsayılan olarak, harita simgesinin görüntüsünün gösterilmesi garanti değildir. Diğer öğeleri veya etiketleri haritada kapattığında gizlenebilir. Görünür kalmasını sağlamak için harita simgesinin CollisionBehaviorDesired özelliğini MapElementCollisionBehavior.RemainVisibleolarak ayarlayın.
İsteğe bağlı Başlık'in MapIcon üzerinde gösterilmesi garanti edilmez. Metni görmüyorsanız, MapControlüzerindeki ZoomLevel özelliğinin değerini azaltarak uzaklaştırın.
Haritada belirli bir konuma işaret eden bir MapIcon görüntüsünü (örneğin, bir raptiye ya da ok) gösterirken, NormalizedAnchorPoint özelliğinin değerini işaretçinin görüntüdeki yaklaşık konumuna ayarlamayı düşünün. NormalizedAnchorPoint değerini görüntünün sol üst köşesini temsil eden varsayılan değeri olan (0, 0) olarak bırakırsanız, haritanın ZoomLevel değişiklikler görüntüyü farklı bir konuma işaret ediyor bırakabilir.
Açıkça bir Rakım ve AltitudeReferenceSystembelirlemezseniz, MapIcon yüzeye konumlandırılır.

3D raptiye ekle

Haritaya üç boyutlu nesneler ekleyebilirsiniz. 3B Üretim Biçimi (3MF) dosyasından bir 3B nesneyi içeri aktarmak için MapModel3D sınıfını kullanın.

Bu görüntüde, bir mahalledeki kafelerin konumlarını işaretlemek için 3B kahve fincanları kullanılır.

Haritalarda bardaklar

Aşağıdaki kod, 3MF dosyasını içeri aktararak haritaya bir kahve fincanı ekler. İşleri basit tutmak için bu kod görüntüyü haritanın ortasına ekler, ancak kodunuz büyük olasılıkla görüntüyü belirli bir konuma ekler.

public async void Add3DMapModel()
{
    var mugStreamReference = RandomAccessStreamReference.CreateFromUri
        (new Uri("ms-appx:///Assets/mug.3mf"));

    var myModel = await MapModel3D.CreateFrom3MFAsync(mugStreamReference,
        MapModel3DShadingOption.Smooth);

    myMap.Layers.Add(new MapElementsLayer
    {
       ZIndex = 1,
       MapElements = new List<MapElement>
       {
          new MapElement3D
          {
              Location = myMap.Center,
              Model = myModel,
          },
       },
    });
}

Görüntü ekleyin

Bir restoranın resmi veya yer işareti gibi harita konumları ile ilgili büyük görüntüler görüntüleyin. Kullanıcılar uzaklaştırdıkça, görüntünün boyutu orantılı olarak küçülerek kullanıcının haritanın daha fazlasını görüntülemesini sağlar. Belirli bir konumu işaretleyen MapIcon'den biraz farklılık gösterir, genellikle küçüktür ve kullanıcılar haritayı yakınlaştırıp uzaklaştırdıklarında aynı boyutta kalır.

MapBillboard görüntüsü

Aşağıdaki kod, yukarıdaki görüntüde sunulan MapBillboard gösterir.

public void AddLandmarkPhoto()
{
    // Create MapBillboard.

    RandomAccessStreamReference mapBillboardStreamReference =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/billboard.jpg"));

    var mapBillboard = new MapBillboard(myMap.ActualCamera)
    {
        Location = myMap.Center,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        Image = mapBillboardStreamReference
    };

    // Add MapBillboard to a layer on the map control.

    var MyLandmarkPhotos = new List<MapElement>();

    MyLandmarkPhotos.Add(mapBillboard);

    var LandmarksPhotoLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarkPhotos
    };

    myMap.Layers.Add(LandmarksPhotoLayer);
}

Bu kodun biraz daha yakından incelemeye değer üç bölümü vardır: Resim, başvuru kamerası ve NormalizedAnchorPoint özelliği.

Resim

Bu örnekte, projenin Varlıklar klasörüne kaydedilmiş özel bir görüntü gösterilmektedir. MapBillboard Image özelliği, RandomAccessStreamReferencetüründe bir değer bekler. Bu tür için, Windows.Storage.Streams ad alanında deyimini kullanan bir gereklidir.

Uyarı

Birden çok harita simgesi için aynı görüntüyü kullanıyorsanız, en iyi performans için sayfa veya uygulama düzeyinde RandomAccessStreamReference bildirin.

Referans kamera

Haritanın ZoomLevel değiştikçe bir MapBillboard görüntüsü ölçeklendirilip küçültülüp büyütüldüğü için, o ZoomLevel içindeki görüntünün normal 1x ölçeğinde nerede görüneceğini tanımlamak önemlidir. Bu konum MapBillboardbaşvuru kamerasında tanımlanır ve bunu ayarlamak için MapBillboardoluşturucusuna bir MapCamera nesnesi geçirmeniz gerekir.

bir Geopointiçinde istediğiniz konumu tanımlayabilir ve ardından bu Geopoint kullanarak MapCamera nesnesi oluşturabilirsiniz. Ancak bu örnekte, harita denetiminin ActualCamera özelliği tarafından döndürülen MapCamera nesnesini kullanıyoruz. Bu haritanın dahili kamerası. Bu kameranın geçerli konumu referans kamera konumuna dönüşür; MapBillboard görüntüsünün 1 kat ölçekte göründüğü konum.

Uygulamanız kullanıcılara haritayı uzaklaştırma olanağı sağlıyorsa, haritaların iç kamerası rakımda yükseldiği için görüntünün boyutu azalırken 1x ölçeğindeki görüntü referans kameranın konumunda sabit kalır.

Normalleştirilmiş Bağlantı Noktası

NormalizedAnchorPoint, MapBillboardözelliklerinden Konum'ye bağlanan görüntünün noktasıdır. 0,5,1 noktası görüntünün alt orta noktasıdır. MapBillboardLocation özelliğini harita denetiminin ortasına ayarladığımız için, görüntünün alt ortası harita denetiminin merkezine sabitlenir. Görüntünüzün doğrudan bir noktanın üzerinde ortalanmış olarak görünmesini istiyorsanız NormalizedAnchorPoint 0,5,0,5 olarak ayarlayın.

Şekil ekleme

MapPolygon sınıfını kullanarak haritada çok noktalı bir şekil görüntüleyin. Aşağıdaki örnek, UWP harita örneğindenharitada mavi kenarlıklı kırmızı bir kutu görüntüler.

public void HighlightArea()
{
    // Create MapPolygon.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;

    var mapPolygon = new MapPolygon
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude+0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        ZIndex = 1,
        FillColor = Colors.Red,
        StrokeColor = Colors.Blue,
        StrokeThickness = 3,
        StrokeDashed = false,
    };

    // Add MapPolygon to a layer on the map control.
    var MyHighlights = new List<MapElement>();

    MyHighlights.Add(mapPolygon);

    var HighlightsLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyHighlights
    };

    myMap.Layers.Add(HighlightsLayer);
}

Bir çizgi ekle

MapPolyline sınıfını kullanarak haritada bir çizgi görüntüleyin. Aşağıdaki örnek, UWP harita örneğindenharitada kesikli bir çizgi görüntüler.

public void DrawLineOnMap()
{
    // Create Polyline.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;
    var mapPolyline = new MapPolyline
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        StrokeColor = Colors.Black,
        StrokeThickness = 3,
        StrokeDashed = true,
    };

   // Add Polyline to a layer on the map control.

   var MyLines = new List<MapElement>();

   MyLines.Add(mapPolyline);

   var LinesLayer = new MapElementsLayer
   {
       ZIndex = 1,
       MapElements = MyLines
   };

   myMap.Layers.Add(LinesLayer);

}

XAML ekleme

XAML kullanarak haritada özel kullanıcı arabirimi öğelerini görüntüleme. XAML'nin konumunu ve normalleştirilmiş bağlantı noktasını belirterek XAML'yi haritada konumlandırın.

SetLocationçağrısı yaparak haritada XAML'nin yerleştirildiği konumu ayarlayın.
setNormalizedAnchorPointçağırarak XAML'de belirtilen konuma karşılık gelen göreli konumu ayarlayın.

Aşağıdaki örnek Seattle şehrinin bir haritasını gösterir ve Space Needle'ın konumunu belirtmek için bir XAML Border denetimi ekler. Ayrıca haritayı alan üzerinde merkezler ve yakınlaştırır. Harita denetimini kullanma hakkında genel bilgi için bkz. 2B, 3B ve Streetside görünümleriyle haritaları görüntüleme.

private void displayXAMLButton_Click(object sender, RoutedEventArgs e)
{
   // Specify a known location.
   BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
   Geopoint snPoint = new Geopoint(snPosition);

   // Create a XAML border.
   Border border = new Border
   {
      Height = 100,
      Width = 100,
      BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue),
      BorderThickness = new Thickness(5),
   };

   // Center the map over the POI.
   MapControl1.Center = snPoint;
   MapControl1.ZoomLevel = 14;

   // Add XAML to the map.
   MapControl1.Children.Add(border);
   MapControl.SetLocation(border, snPoint);
   MapControl.SetNormalizedAnchorPoint(border, new Point(0.5, 0.5));
}

Bu örnekte haritada mavi bir kenarlık görüntülenir.

Harita üzerinde ilgi noktasında görüntülenen xaml ekran görüntüsü

Sonraki örneklerde, veri bağlama kullanılarak doğrudan sayfanın XAML işaretlemesine XAML kullanıcı arabirimi öğelerinin nasıl ekleneceği gösterilmektedir. Diğer içerik görüntüleyen XAML öğelerinde olduğu gibi, Alt, MapControl'nin varsayılan içerik özelliğidir ve XAML işaretlemesinde açıkça belirtilmesi gerekmez.

Bu örnekte, iki XAML denetiminin MapControlörtük alt öğeleri olarak nasıl görüntüleneceği gösterilmektedir. Bu denetimler, veri bağlama konumlarında haritada görünür.

<maps:MapControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
</maps:MapControl>

Arka planda kod dosyanızda bir özellik kullanarak bu konumları ayarlayın.

public Geopoint SeattleLocation { get; set; }
public Geopoint BellevueLocation { get; set; }

Bu örnekte, bir MapItemsControliçinde yer alan iki XAML denetiminin nasıl görüntüleneceği gösterilmektedir. Bu denetimler, veri bağlama konumlarında haritada görünür.

<maps:MapControl>
  <maps:MapItemsControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
  </maps:MapItemsControl>
</maps:MapControl>

Bu örnekte, MapItemsControlile ilişkili XAML öğeleri koleksiyonu görüntülenir.

<maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
  <maps:MapItemsControl ItemsSource="{x:Bind LandmarkOverlays}">
      <maps:MapItemsControl.ItemTemplate>
          <DataTemplate>
              <StackPanel Background="Black" Tapped ="Overlay_Tapped">
                  <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Title}"
                    maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
              </StackPanel>
          </DataTemplate>
      </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>

Yukarıdaki örnekteki özelliği, arka planda kod dosyasındaki IList türünde bir özelliğe bağlıdır.

public sealed partial class Scenario1 : Page
{
    public IList LandmarkOverlays { get; set; }

    public MyClassConstructor()
    {
         SetLandMarkLocations();
         this.InitializeComponent();   
    }

    private void SetLandMarkLocations()
    {
        LandmarkOverlays = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        LandmarkOverlays.Add(pikePlaceIcon);

        var SeattleSpaceNeedleIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.6205, Longitude = -122.3493 }),
            Title = "Seattle Space Needle"
        };

        LandmarkOverlays.Add(SeattleSpaceNeedleIcon);
    }
}

Katmanlarla çalışma

Bu kılavuzdaki örnekler MapElementsLayer koleksiyonuna öğe ekler. Ardından bu koleksiyonun harita denetiminin Katmanlar özelliğine nasıl ekleneceğini gösterir. Önceki sürümlerde bu kılavuzda, MapElements koleksiyonuna aşağıdaki gibi harita öğelerinin nasıl ekleneceği gösterilir:

var pikePlaceIcon = new MapIcon
{
    Location = new Geopoint(new BasicGeoposition
    { Latitude = 47.610, Longitude = -122.342 }),
    NormalizedAnchorPoint = new Point(0.5, 1.0),
    ZIndex = 0,
    Title = "Pike Place Market"
};

myMap.MapElements.Add(pikePlaceIcon);

Bu yaklaşımı kullanmaya devam edebilirsiniz ancak yeni harita katmanı modelinin bazı avantajlarını kaçıracaksınız. Öğelerinizi katmanlar halinde gruplandırarak her katmanı birbirinden bağımsız olarak işleyebilirsiniz. Örneğin, her katmanın kendi olay kümesi vardır, böylece belirli bir katmandaki bir olaya yanıt verebilir ve bu olaya özgü bir eylem gerçekleştirebilirsiniz.

Ayrıca, XAML'yi doğrudan MapLayerbağlayabilirsiniz. Bu, MapElements koleksiyonunu kullanarak yapılamaz.

Bunu yapmanın bir yolu, bir görünüm modeli sınıfı, bir XAML sayfası ve bu XAML sayfasının arkasında kod kullanmaktır.

Model sınıfını görüntüleme

public class LandmarksViewModel
{
    public ObservableCollection<MapLayer> LandmarkLayer
        { get; } = new ObservableCollection<MapLayer>();

    public LandmarksViewModel()
    {
        var MyElements = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        MyElements.Add(pikePlaceIcon);

        var LandmarksLayer = new MapElementsLayer
        {
            ZIndex = 1,
            MapElements = MyElements
        };

        LandmarkLayer.Add(LandmarksLayer);         
    }

XAML sayfasının arkasındaki kod

Kod arkası sayfanıza görünüm modeli sınıfını bağlayın.

public LandmarksViewModel ViewModel { get; set; }

public myMapPage()
{
    this.InitializeComponent();
    this.ViewModel = new LandmarksViewModel();
}

XAML sayfası

XAML sayfanızda, görünüm modeli sınıfınızdaki katmanı döndüren özelliğine bağlayın.

<maps:MapControl
    x:Name="myMap" TransitFeaturesVisible="False" Loaded="MyMap_Loaded" Grid.Row="2"
    MapServiceToken="Your token" Layers="{x:Bind ViewModel.LandmarkLayer}"/>

Bing Haritalar Geliştirici Merkezi
UWP harita örneği
Haritalar için tasarım yönergeleri
Derleme 2015 videosu: Windows Uygulamalarınızda Telefon, Tablet ve Pc'de Haritalar ve Konum'dan Yararlanma
UWP trafik uygulaması örneği
MapIcon
MapPolygon
MapPolyline

Aracılığıyla paylaş

Haritada ilgi çekici noktaları görüntüleme

Bir raptiye ekle

3D raptiye ekle

Görüntü ekleyin

Resim

Referans kamera

Normalleştirilmiş Bağlantı Noktası

Şekil ekleme

Bir çizgi ekle

XAML ekleme

Katmanlarla çalışma

Model sınıfını görüntüleme

XAML sayfasının arkasındaki kod

XAML sayfası

İlgili konular

Geri Bildirim

Ek kaynaklar