Haritaya açılan pencere ekleme

Bu makalede, harita üzerinde bir noktaya açılan pencere ekleme gösterilir.

Kodu anlama

Aşağıdaki kod, sembol katmanını kullanarak haritaya name ve description özelliklerine sahip bir nokta özelliği ekler. Açılan sınıfın bir örneği oluşturulur ancak görüntülenmez. Fare olayları, açılan pencereyi açma ve kapatmayı tetiklemek için sembol katmanına eklenir. İşaretçi simgesinin üzerine gelindiğinde, açılan pencerenin özelliği işaretçinin konumuyla güncelleştirilir ve seçenek, üzerine gelinen nokta özelliğinin ve özelliklerini sarma eden bazı HTML'lerle position content name description güncelleştirilir. Ardından açılan pencere, işlevi kullanılarak haritada open görüntülenir.

//Define an HTML template for a custom popup content laypout.
var popupTemplate = '<div class="customInfobox"><div class="name">{name}</div>{description}</div>';

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

dataSource.add(new atlas.data.Feature(new atlas.data.Point([-122.1333, 47.63]), {
  name: 'Microsoft Building 41', 
  description: '15571 NE 31st St, Redmond, WA 98052'
}));

//Create a layer to render point data.
var symbolLayer = new atlas.layer.SymbolLayer(dataSource);

//Add the polygon and line the symbol layer to the map.
map.layers.add(symbolLayer);

//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup({
  pixelOffset: [0, -18],
  closeButton: false
});

//Add a hover event to the symbol layer.
map.events.add('mouseover', symbolLayer, function (e) {
  //Make sure that the point exists.
  if (e.shapes && e.shapes.length > 0) {
    var content, coordinate;
    var properties = e.shapes[0].getProperties();
    content = popupTemplate.replace(/{name}/g, properties.name).replace(/{description}/g, properties.description);
    coordinate = e.shapes[0].getCoordinates();

    popup.setOptions({
      //Update the content of the popup.
      content: content,

      //Update the popup's position with the symbol's coordinate.
      position: coordinate

    });
    //Open the popup.
    popup.open(map);
  }
});

map.events.add('mouseleave', symbolLayer, function (){
  popup.close();
});

Yukarıdaki işlevlerin çalışan tam kod örneği aşağıda verilmiştir.


Bir açılan pencereyi birden çok noktayla yeniden kullanarak

En iyi yaklaşımın bir açılır pencere oluşturmak ve yeniden kullanmak olduğu durumlar vardır. Örneğin, çok sayıda noktanız olabilir ve aynı anda yalnızca bir açılan pencere göstermek istiyor olabilir. Açılan pencere yeniden kullanılırken, uygulama tarafından oluşturulan DOM öğelerinin sayısı büyük ölçüde azaltıldı ve bu da daha iyi performans sağlandı. Aşağıdaki örnek 3 nokta özellikleri oluşturur. Bunlardan herhangi birini tıklarsanız ilgili nokta özelliğinin içeriğinin yer alan bir açılır pencere görüntülenir.


Açılan pencereyi özelleştirme

Varsayılan olarak, açılan pencerede beyaz bir arka plan, altta bir işaretçi oku ve sağ üst köşede bir kapatma düğmesi vardır. Aşağıdaki örnek, açılan pencere seçeneğini kullanarak arka plan fillColor rengini siyah olarak değiştirir. Kapat düğmesi, seçeneği false olarak CloseButton ayarılarak kaldırılır. Açılan pencerenin HTML içeriği, açılan pencere kenarlarından 10 piksellik bir alan kullanır. Metin beyaza büründü, bu nedenle siyah arka planda güzel bir şekilde görünüyor.


Haritaya açılan şablonlar ekleme

Açılan şablonlar, açılan pencereler için veri odaklı düzenler oluşturmanızı kolaylaştırır. Aşağıdaki bölümlerde, özelliklerin özelliklerini kullanarak biçimlendirilmiş içerik oluşturmak için çeşitli açılan şablonların kullanımı gösterilmiştir.

Not

Varsayılan olarak, açılan şablon kullanan işlenen tüm içerik bir iframe içinde güvenlik özelliği olarak korumalı alan olarak kullanılır. Ancak, bazı sınırlamalar vardır:

  • Tüm betikler, formlar, işaretçi kilidi ve üst gezinti işlevleri devre dışı bırakılır. Bağlantılar tıklanırken yeni bir sekmede açılmasına izin verilir.
  • iframe'lerde parametresini srcdoc desteklemeen eski tarayıcılar, az miktarda içerik işlemeyle sınırlı olacaktır.

Açılan pencerelere yüklenen verilere güveniyorsanız ve potansiyel olarak bu betiklerin uygulamanıza erişmesini istiyorsanız, açılan şablonlar seçeneğini false olarak ayarerek bunu devre dışı sandboxContent abilirsiniz.

Dize şablonu

Dize şablonu, yer tutucuları özellik özelliklerinin değerleriyle değiştirir. Özelliğin özelliklerine Dize türünde bir değer atanmamış olmalıdır. Örneğin, bir value1 tamsayı tutar. Bu değerler daha sonra içerik özelliğine popupTemplate geçirildi.

numberFormatseçeneği, görüntülemek istediğiniz say ın biçimini belirtir. numberFormatbelirtilmezse, kod açılır şablonlar tarih biçimini kullanır. seçeneği numberFormat Number.toLocaleString işlevini kullanarak sayıları biçimler. Büyük sayıları biçimlendirmek için numberFormat NumberFormat.format işleviyle seçeneğini kullanmayı göz önünde bulundurabilirsiniz. Örneğin, aşağıdaki kod parçacığı kesir maximumFractionDigits basamaklarının sayısını iki ile sınırlamak için kullanır.

Not

Dize şablonunun görüntü işlemenin tek bir yolu vardır. İlk olarak, Dize şablonunun içinde bir görüntü etiketi olması gerekir. Görüntü etiketine geçirilen değer, görüntünün URL'si olmalıdır. Ardından, Dize şablonunun içinde isImage true olarak ayarlanmış olması HyperLinkFormatOptions gerekir. seçeneği, köprüyü bir görüntü için belirtir ve köprü isImage bir görüntü etiketine yüklenir. Köprüye tıklarsa görüntü açılır.

var templateOptions = {
  content: 'This template uses a string template with placeholders.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
  numberFormat: {
    maximumFractionDigits: 2
  }
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 1 - String template',
    value1: 1.2345678,
    value2: {
        subValue: 'Pizza'
    },
    arrayValue: [3, 4, 5, 6]
});

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

PropertyInfo şablonu

PropertyInfo şablonu özelliğin kullanılabilir özelliklerini görüntüler. labelseçeneği, kullanıcıya görüntü eklenecek metni belirtir. labelBelirtilmezse köprü görüntülenir. Köprü bir görüntü ise "alt" etiketine atanan değer görüntülenir. , tarihin biçimini belirtir ve tarih biçimi belirtilmezse tarih dateFormat bir dize olarak işleme alır. seçeneği, hyperlinkFormat tıklanabilir bağlantıları işler, benzer şekilde, email seçeneği tıklanabilir e-posta adreslerini işlemek için kullanılabilir.

PropertyInfo şablonu, özellikleri son kullanıcıya görüntülemeden önce, özelliklerin gerçekten de bu özellik için tanımlandıklarını tekrar tekrar denetler. Ayrıca stil ve başlık özelliklerini görüntülemeyi de yoksayar. Örneğin, , color ve size anchor strokeOpacity visibility görüntülemez. Bu nedenle, özellik yolu denetimi arka uçta tamamlandıktan sonra PropertyInfo şablonu içeriği tablo biçiminde gösterir.

var templateOptions = {
  content: [
    {
        propertyPath: 'createDate',
        label: 'Created Date'
    },
    {
        propertyPath: 'dateNumber',
        label: 'Formatted date from number',
        dateFormat: {
          weekday: 'long',
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          timeZone: 'UTC',
          timeZoneName: 'short'
        }
    },
    {
        propertyPath: 'url',
        label: 'Code samples',
        hideLabel: true,
        hyperlinkFormat: {
          lable: 'Go to code samples!',
          target: '_blank'
        }
    },
    {
        propertyPath: 'email',
        label: 'Email us',
        hideLabel: true,
        hyperlinkFormat: {
          target: '_blank',
          scheme: 'mailto:'
        }
    }
  ]
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 2 - PropertyInfo',
    createDate: new Date(),
    dateNumber: 1569880860542,
    url: 'https://aka.ms/AzureMapsSamples',
    email: 'info@microsoft.com'
}),

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

Birden çok içerik şablonu

Bir özellik, Dize şablonu ve PropertyInfo şablonunun birleşimini kullanarak da içerik görüntüsü oluşturabilir. Bu durumda, Dize şablonu yer tutucu değerlerini beyaz arka planda işler. Ayrıca PropertyInfo şablonu bir tablonun içinde tam genişlikli bir görüntü oluşturur. Bu örnekteki özellikler, önceki örneklerde açıklanan özelliklere benzer.

var templateOptions = {
  content: [
    'This template has two pieces of content; a string template with placeholders and a array of property info which renders a full width image.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
    [{
      propertyPath: 'imageLink',
      label: 'Image',
      hideImageLabel: true,
      hyperlinkFormat: {
        isImage: true
      }
    }]
  ],
  numberFormat: {
    maximumFractionDigits: 2
  }
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 3 - Multiple content template',
    value1: 1.2345678,
    value2: {
    subValue: 'Pizza'
    },
    arrayValue: [3, 4, 5, 6],
    imageLink: 'https://azuremapscodesamples.azurewebsites.net/common/images/Pike_Market.jpg'
});

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

Tanımlı şablon olmadan noktalar

Açılan şablon bir Dize şablonu, PropertyInfo şablonu veya her ikisinin birleşimi olarak tanımlanmamışsa, varsayılan ayarları kullanır. Atanan tek özellikler ve olduğunda açılan şablonda, sağ üst köşede bir kapatma düğmesi olan beyaz title description bir arka plan açılır. Ayrıca küçük ve orta ekranlarda altta bir ok gösterir. Varsayılan ayarlar, ve dışında tüm özellikler için bir tablonun title içinde description gösterir. Varsayılan ayarlara geri dönülse bile açılan şablon yine de program aracılığıyla işlemeye devam edebilirsiniz. Örneğin, kullanıcılar köprü algılamayı kapatabilirsiniz ve varsayılan ayarlar diğer özellikler için geçerli olur.

CodePen'de haritanın noktalarına tıklayın. Şu açılan şablonların her biri için haritada bir nokta vardır: Dize şablonu, PropertyInfo şablonu ve Birden çok içerik şablonu. Ayrıca şablonların varsayılan ayarlar kullanılarak nasıl işlen olduğunu göstermek için üç nokta da vardır.


Açılır pencere şablonunu yeniden kullanma

Açılan pencereyi yeniden kullanma gibi, açılır pencere şablonlarını da yeniden kullanabilirsiniz. Bu yaklaşım, birden çok nokta için aynı anda yalnızca bir açılan şablon göstermek istediğiniz zaman kullanışlıdır. Açılan şablon yeniden kullanılırsa, uygulama tarafından oluşturulan DOM öğelerinin sayısı azalır ve bu da uygulama performansınızı artırır. Aşağıdaki örnek, üç nokta için aynı açılır pencere şablonunu kullanır. Bunlardan herhangi birini tıklarsanız ilgili nokta özelliğinin içeriğinin yer alan bir açılır pencere görüntülenir.


Açılan pencereler açılabilir, kapatılabilir ve sürüklenerek açılabilir. Açılır sınıf, geliştiricilerin bu olaylara tepki vermelerine yardımcı olmak için olaylar sağlar. Aşağıdaki örnek, kullanıcı açılır pencereyi açtığında, açtığında veya sürüklenken hangi olayların aç olduğunu vurgular.


Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi bulabilirsiniz:

Tam kod örnekleri için aşağıdaki harika makalelere göz atın: