Haritaya açılan pencere ekleme
Bu makalede, haritadaki bir noktaya açılan pencere ekleme işlemi gösterilmektedir.
Kodu anlama
Aşağıdaki kod, sembol katmanı kullanarak haritaya ve description özellikleriyle name bir nokta özelliği ekler. Popup sınıfının bir örneği oluşturulur ancak görüntülenmez. Açılır pencere açma ve kapatmayı tetikleme amacıyla fare olayları simge katmanına eklenir. İşaretçi simgesi üzerine gelindiğinde, açılan öğenin position özelliği işaretçinin konumuyla güncelleştirilir ve content seçenek, üzerine gelinen nokta özelliğinin name ve description özelliklerini sarmalayan bazı HTML'lerle güncelleştirilir. Açılan pencere daha sonra işlevi kullanılarak open haritada 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();
});
Birden çok nokta içeren bir açılır pencere yeniden kullanım
En iyi yaklaşımın bir açılır pencere oluşturup yeniden kullanmak olduğu durumlar vardır. Örneğin, çok sayıda noktanız olabilir ve bir kerede yalnızca bir açılır pencere göstermek isteyebilirsiniz. Açılan pencere yeniden kullanılırken, uygulama tarafından oluşturulan DOM öğelerinin sayısı büyük ölçüde azalır ve bu da daha iyi performans sağlayabilir. Aşağıdaki örnek 3 noktalı özellikler oluşturur. Bunlardan herhangi birini seçerseniz, bu nokta özelliğinin içeriğiyle birlikte bir açılır pencere görüntülenir.
Her nokta özelliği için bir açılan pencere oluşturmak ve yeniden kullanmak yerine nasıl oluşturulacağını gösteren tam işlevsel bir örnek için, bkz. Azure Haritalar Örnekleri'nde Birden Çok Pin ile Açılan Pencere Yeniden Kullanma. Bu örneğin kaynak kodu için bkz . Birden Çok Pin kaynak koduyla Açılan Pencere Yeniden Kullanma.
Açılan menü özelleştirme
Varsayılan olarak, açılır pencere beyaz bir arka plana, altta bir işaretçi okuna ve sağ üst köşede bir kapat düğmesine sahiptir. Aşağıdaki örnek, açılır pencere seçeneğini kullanarak fillColor arka plan rengini siyah olarak değiştirir. Kapat düğmesi, seçeneği false olarak ayarlanarak CloseButton kaldırılır. Açılan penceredeki HTML içeriği, açılan pencere kenarlarından 10 piksel doldurulmuş olarak kullanılır. Metin beyaz yapılır, bu nedenle siyah arka planda güzel bir şekilde gösterilir.
Açılan pencere görünümünü özelleştirmeyi gösteren tam işlevsel bir örnek için, Azure Haritalar Örnekleri'ndeki Açılır pencere özelleştirme bölümüne bakın. Bu örneğin kaynak kodu için bkz . Açılan kaynak kodunu özelleştirme.
Haritaya açılır şablon ekleme
Açılan şablonlar, açılır pencereler için veri temelli düzenler oluşturmayı kolaylaştırır. Aşağıdaki bölümlerde, özelliklerin özelliklerini kullanarak biçimlendirilmiş içerik oluşturmak için çeşitli açılır şablonların kullanımı gösterilmektedir.
Dekont
Varsayılan olarak, açılan şablon kullanılırken işlenen tüm içerik bir iframe'in içinde güvenlik özelliği olarak korumalı olarak yer alır. Ancak, sınırlamalar vardır:
- Tüm betikler, formlar, işaretçi kilidi ve üst gezinti işlevleri devre dışı bırakılır. Tıklandığında bağlantıların yeni bir sekmede açılmasına izin verilir.
- iframe'lerde parametresini
srcdocdesteklemeyen 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 bu betiklerin açılır pencerelere yüklenmesini istiyorsanız, açılan şablonlar sandboxContent seçeneğini false olarak ayarlayarak bunu devre dışı bırakabilirsiniz.
Dize şablonu
Dize şablonu, yer tutucuları özellik özelliklerinin değerleriyle değiştirir. Özelliğin özelliklerine Dize türünde bir değer atanmak zorunda değildir. Örneğin, value1 bir tamsayı tutar. Bu değerler daha sonra öğesinin içerik özelliğine popupTemplategeçirilir.
numberFormat seçeneği, görüntülenecek sayının biçimini belirtir. numberFormat belirtilmezse, kod açılır şablonlar tarih biçimini kullanır. seçeneği Number.toLocaleString numberFormat işlevini kullanarak sayıları biçimlendiriyor . Büyük sayıları biçimlendirmek için NumberFormat.format işleviyle seçeneğini kullanmayı numberFormat göz önünde bulundurun. Örneğin, aşağıdaki kod parçacığı kesir basamaklarının sayısını iki ile sınırlamak için kullanır maximumFractionDigits .
Dekont
Dize şablonunun görüntüleri işlemesinin 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 bir görüntünün URL'si olmalıdır. Ardından Dize şablonunun içinde HyperLinkFormatOptionstrue olarak ayarlanmış olması isImage gerekir. isImage seçeneği, köprünin bir görüntü için olduğunu belirtir ve köprü bir görüntü etiketine yüklenir. Köprüye tıklandığında resim 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. label seçeneği, kullanıcıya görüntülenecek metni belirtir. Belirtilmezse label köprü görüntülenir. Köprü bir görüntüyse, "alt" etiketine atanan değer görüntülenir. dateFormat tarihin biçimini belirtir ve tarih biçimi belirtilmezse, tarih bir dize olarak işlenir. Seçeneği hyperlinkFormat tıklanabilir bağlantıları işler, benzer şekilde tıklanabilir email e-posta adreslerini işlemek için de kullanılabilir.
PropertyInfo şablonu özellikleri son kullanıcıya göstermeden önce, özelliklerin gerçekten bu özellik için tanımlandığını yinelemeli olarak denetler. Ayrıca, görüntüleme stili ve başlık özelliklerini yoksayar. Örneğin, , , sizeanchor, strokeOpacityve visibilitygörüntülenmiyorcolor. Bu nedenle, arka uçta özellik yolu denetimi 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://samples.azuremaps.com/',
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 şablonunun ve PropertyInfo şablonunun birleşimini kullanarak da içerik görüntüleyebilir. Bu durumda, Dize şablonu yer tutucu değerlerini beyaz bir arka planda işler. PropertyInfo şablonu da bir tablonun içinde tam genişlikte bir görüntü oluşturur. Bu örnekteki özellikler, önceki örneklerde açıkladığımız ö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://samples.azuremaps.com/images/Pike_Market.jpg'
});
var popup = new atlas.Popup({
content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
position: feature.geometry.coordinates
});
Tanımlı şablon içermeyen puanlar
Açılan pencere şablonu bir Dize şablonu, PropertyInfo şablonu veya her ikisinin birleşimi olarak tanımlanmadığında varsayılan ayarları kullanır. title ve description tek atanan özellikler olduğunda, açılır şablon sağ üst köşede beyaz bir arka plan, bir kapat düğmesi gösterir. Küçük ve orta ekranlarda altta bir ok gösterilir. ve dışındaki titledescriptiontüm özellikler için varsayılan ayarlar bir tablonun içinde gösterilir. Varsayılan ayarlara geri dönülse bile, açılır şablon yine de program aracılığıyla değiştirilebilir. Örneğin, kullanıcılar köprü algılamayı kapatabilir ve varsayılan ayarlar diğer özelliklere de uygulanır.
Çalıştırdıktan sonra, açılan menüye bakmak için haritadaki noktaları seçebilirsiniz. Şu açılır şablonların her biri için haritada bir nokta vardır: Dize şablonu, PropertyInfo şablonu ve Birden çok içerik şablonu. Şablonların varsayılan ayarları kullanarak nasıl işlenmek üzere olduğunu gösteren üç nokta da vardır.
function InitMap()
{
var map = new atlas.Map('myMap', {
zoom: 2,
view: "Auto",
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function() {
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add sample data.
datasource.add([
new atlas.data.Feature(new atlas.data.Point([-20, 20]), {
title: 'No template - title/description',
description: 'This point doesn\'t have a template defined, fallback to title and description properties.'
}),
new atlas.data.Feature(new atlas.data.Point([20, 20]), {
title: 'No template - property table',
message: 'This point doesn\'t have a template defined, fallback to title and table of properties.',
randomValue: 10,
url: 'https://samples.azuremaps.com/',
imageLink: 'https://samples.azuremaps.com/images/Pike_Market.jpg',
email: 'info@microsoft.com'
}),
new atlas.data.Feature(new atlas.data.Point([40, 0]), {
title: 'No template - hyperlink detection disabled',
message: 'This point doesn\'t have a template defined, fallback to title and table of properties.',
randomValue: 10,
url: 'https://samples.azuremaps.com/',
email: 'info@microsoft.com',
popupTemplate: {
detectHyperlinks: false
}
}),
new atlas.data.Feature(new atlas.data.Point([-20, -20]), {
title: 'Template 1 - String template',
value1: 1.2345678,
value2: {
subValue: 'Pizza'
},
arrayValue: [3, 4, 5, 6],
popupTemplate: {
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
}
}
}),
new atlas.data.Feature(new atlas.data.Point([20, -20]), {
title: 'Template 2 - PropertyInfo',
createDate: new Date(),
dateNumber: 1569880860542,
url: 'https://samples.azuremaps.com/',
email: 'info@microsoft.com',
popupTemplate: {
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:'
}
}
]
}
}),
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://samples.azuremaps.com/images/Pike_Market.jpg',
popupTemplate: {
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
}
}
}),
]);
//Create a layer that defines how to render the points on the map.
var layer = new atlas.layer.BubbleLayer(datasource);
map.layers.add(layer);
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();
//Add a click event to the layer.
map.events.add('click', layer, showPopup);
});
function showPopup(e) {
if (e.shapes && e.shapes.length > 0) {
var properties = e.shapes[0].getProperties();
popup.setOptions({
//Update the content of the popup.
content: atlas.PopupTemplate.applyTemplate(properties, properties.popupTemplate),
//Update the position of the popup with the pins coordinate.
position: e.shapes[0].getCoordinates()
});
//Open the popup.
popup.open(map);
}
}
}
Açılır pencere şablonunu yeniden kullanma
Bir açılır pencere yeniden kullanılmasına benzer şekilde, açılır pencere şablonlarını yeniden kullanabilirsiniz. Bu yaklaşım, aynı anda birden çok nokta için yalnızca bir açılan şablon göstermek istediğinizde kullanışlıdır. Açılan şablonların yeniden kullanımı, uygulama tarafından oluşturulan DOM öğelerinin sayısını azaltarak uygulama performansınızı artırır. Aşağıdaki örnekte üç nokta için aynı açılır şablon kullanılmaktadır. Bunlardan herhangi birini seçerseniz, bu nokta özelliğinin içeriğiyle birlikte bir açılır pencere görüntülenir.
Ortak bir özellik alanı kümesini paylaşan birden çok özelliğe sahip tek bir açılır pencere şablonunun yeniden kullanılmasını gösteren tam işlevsel bir örnek için bkz. Azure Haritalar Örnekleri'nde açılan şablonu yeniden kullanma. Bu örneğin kaynak kodu için bkz . Açılan şablon kaynak kodunu yeniden kullanma.
Açılan olaylar
Açılan pencereler açılabilir, kapatılabilir ve sürüklenebilir. Açılır sınıf, geliştiricilerin bu olaylara tepki vermesine yardımcı olmak için olaylar sağlar. Aşağıdaki örnekte, kullanıcı açılır pencere açıldığında, kapatıldığında veya sürüklendiğinde hangi olayların tetiklendiği vurgulanır.
Açılan pencerelere olayların nasıl ekleneceğini gösteren tam işlevsel bir örnek için Azure Haritalar Örnekleri'ndeki Açılan olaylar bölümüne bakın. Bu örneğin kaynak kodu için bkz . Açılan olaylar kaynak kodu.
Sonraki adımlar
Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:
Tam kod örnekleri için aşağıdaki harika makalelere bakın: