Menambahkan popup ke peta
Artikel ini menunjukkan cara menambahkan popup ke titik pada peta.
Memahami kode
Kode berikut menambahkan fitur titik dengan name properti dan description ke peta menggunakan lapisan simbol. Instans Kelas popup dibuat tetapi tidak ditampilkan. Peristiwa mouse ditambahkan ke lapisan simbol untuk memicu pembukaan dan penutupan popup. Saat simbol penanda diarahkan, position properti popup diperbarui dengan posisi penanda, dan content opsi diperbarui dengan beberapa HTML yang membungkus properti name dan description dari fitur titik yang diarahkan. Kemudian popup akan dimunculkan di peta menggunakan fungsi open-nya.
//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();
});
Menggunakan kembali popup dengan beberapa titik
Ada kasus di mana praktik terbaiknya adalah membuat satu popup dan menggunakannya kembali. Misalnya, Anda mungkin memiliki sejumlah besar titik dan hanya ingin menampilkan satu popup sekaligus. Dengan menggunakan kembali popup, jumlah elemen DOM yang dibuat oleh aplikasi akan berkurang drastis, yang dapat menghasilkan performa lebih baik. Berikut contoh membuat fitur 3 titik. Jika Anda memilih salah satunya, popup ditampilkan dengan konten untuk fitur titik tersebut.
Untuk sampel fungsional penuh yang menunjukkan cara membuat satu popup dan menggunakannya kembali daripada membuat popup untuk setiap fitur titik, lihat Menggunakan Kembali Popup dengan Beberapa Pin di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Menggunakan Kembali Popup dengan kode sumber Beberapa Pin.
Mengkustomisasi popup
Secara default, popup memiliki latar belakang putih, panah penunjuk di bagian bawah, dan tombol tutup di sudut kanan atas. Berikut contoh mengubah warna latar belakang menjadi hitam menggunakan opsi fillColor popup. Tombol tutup dapat dihilangkan dengan menetapkan opsi CloseButton ke false. Konten HTML popup menggunakan padding 10 piksel dari tepi popup. Teks berwarna putih, sangat cocok dengan latar belakang hitam.
Untuk sampel fungsi penuh yang memperlihatkan cara mengkustomisasi tampilan popup, lihat Mengkustomisasi popup di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Mengkustomisasi kode sumber popup.
Menambahkan templat popup ke peta
Templat popup memudahkan pembuatan tata letak berbasis data untuk popup. Bagian berikut menunjukkan penggunaan berbagai templat popup untuk menghasilkan konten yang diformat menggunakan properti fitur.
Catatan
Secara default, semua konten yang dirender menggunakan templat popup akan di-sandbox di dalam iframe sebagai fitur keamanan. Namun, ada beberapa batasan:
- Semua skrip, format, pointer lock, dan fungsionalitas navigasi atas dinonaktifkan. Tautan diizinkan untuk terbuka di tab baru saat diklik.
- Browser lama yang tidak mendukung parameter
srcdocpada iframe hanya dapat merender konten dalam jumlah kecil.
Jika berharap data dimuat ke dalam popup dan ingin skrip yang dimuat ke dalam popup ini dapat mengakses aplikasi, Anda dapat menonaktifkan pengaturannya dengan menetapkan opsi sandboxContent templat popup ke false.
Templat string
Template String mengganti tempat penampung dengan nilai properti fitur. Properti fitur tidak harus diberi nilai jenis String. Misalnya, value1 bernilai bilangan bulat. Nilai-nilai ini kemudian diteruskan ke properti konten popupTemplate.
Opsi numberFormat menentukan format angka yang akan ditampilkan. numberFormat Jika tidak ditentukan, maka kode menggunakan format tanggal templat popup. Opsi numberFormat memformat angka menggunakan fungsi Number.toLocaleString. Untuk memformat angka besar, pertimbangkan untuk menggunakan opsi numberFormat dengan fungsi dari NumberFormat.format. Misalnya, cuplikan berikut maximumFractionDigits menggunakan kode untuk membatasi jumlah digit pecahan menjadi dua.
Catatan
Hanya ada satu cara agar templat String dapat merender gambar. Pertama, templat String harus memiliki tag gambar. Nilai yang diteruskan ke tag gambar harus berupa URL ke gambar. Kemudian, templat String harus memiliki isImage yang ditetapkan ke true di HyperLinkFormatOptions. Opsi isImage menentukan bahwa hyperlink adalah untuk gambar, dan akan dimuat ke dalam tag gambar. Saat hyperlink diklik, gambar akan terbuka.
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
});
Templat PropertyInfo
Templat PropertyInfo menampilkan properti fitur yang tersedia. Opsi label menentukan teks yang akan ditampilkan ke pengguna. Jika label tidak ditentukan, hyperlink akan ditampilkan. Dan, jika hyperlink adalah gambar, nilai yang ditetapkan ke tag "alt" ditampilkan. dateFormat menentukan format tanggal, dan jika format tanggal tidak ditentukan, maka tanggal akan dirender sebagai string. Opsi hyperlinkFormat merender tautan yang dapat diklik, sama halnya dengan opsi email yang dapat digunakan untuk merender alamat email yang dapat diklik.
Sebelum templat PropertyInfo menampilkan properti ke pengguna akhir, templat tersebut secara berulang akan memeriksa apakah properti memang ditentukan untuk fitur tersebut. Templat tersebut juga akan mengabaikan properti gaya dan judul yang ditampilkan. Misalnya, tidak menampilkan color, , size, anchorstrokeOpacity, dan visibility. Jadi, setelah pemeriksaan jalur properti selesai di ujung belakang, templat PropertyInfo akan menampilkan konten dalam format tabel.
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
});
Beberapa templat konten
Fitur mungkin juga menampilkan konten menggunakan kombinasi templat String dan templat PropertyInfo. Dalam hal ini, templat String merender nilai tempat penampung pada latar belakang putih. Kemudian, templat PropertyInfo merender keseluruhan gambar di dalam tabel. Properti dalam sampel ini sama dengan properti yang telah dijelaskan pada sampel sebelumnya.
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
});
Titik tanpa templat yang ditentukan
Jika templat Popup tidak ditentukan sebagai templat String, templat PropertyInfo, atau kombinasi keduanya, maka templat tersebut akan menggunakan pengaturan default. Jika title dan description adalah satu-satunya properti yang ditentukan, templat popup akan menampilkan latar belakang putih dan tombol tutup di sudut kanan atas. Serta, pada layar kecil dan sedang, templat akan menampilkan panah di bagian bawah. Pengaturan default menampilkan konten dalam tabel untuk semua properti selain title dan description. Bahkan ketika dikembalikan ke pengaturan default, templat popup masih dapat dimanipulasi secara terprogram. Misalnya, pengguna dapat menonaktifkan deteksi hyperlink dan pengaturan default akan tetap berlaku untuk properti lain.
Setelah berjalan, Anda dapat memilih titik di peta untuk melihat popup. Ada titik pada peta untuk setiap templat popup berikut: Templat string, templat PropertyInfo, dan Templat beberapa konten. Ada juga tiga titik untuk menunjukkan bagaimana templat dirender menggunakan pengaturan default.
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);
}
}
}
Menggunakan kembali templat popup
Mirip dengan menggunakan kembali popup, Anda dapat menggunakan kembali templat popup. Pendekatan ini berguna jika Anda hanya ingin menampilkan satu templat popup pada satu waktu, untuk beberapa titik. Menggunakan kembali templat popup mengurangi jumlah elemen DOM yang dibuat oleh aplikasi, meningkatkan performa aplikasi Anda. Contoh berikut menggunakan templat popup yang sama untuk tiga titik. Jika Anda memilih salah satunya, popup ditampilkan dengan konten untuk fitur titik tersebut.
Untuk sampel fungsional penuh yang memperlihatkan panas untuk menggunakan kembali templat popup tunggal dengan beberapa fitur yang berbagi sekumpulan bidang properti umum, lihat Menggunakan kembali templat popup di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Menggunakan kembali kode sumber templat popup.
Peristiwa popup
Popup dapat dibuka, ditutup, dan diseret. Kelas popup menyediakan peristiwa untuk membantu pengembang bereaksi dengan peristiwa ini. Contoh berikut menyoroti peristiwa mana yang diaktifkan saat pengguna membuka, menutup, atau menyeret popup.
Untuk sampel yang berfungsi penuh yang memperlihatkan cara menambahkan peristiwa ke popup, lihat Peristiwa popup di Sampel Azure Peta. Untuk kode sumber untuk sampel ini, lihat Kode sumber peristiwa popup.
Langkah berikutnya
Pelajari selengkapnya tentang kelas dan metode yang digunakan di artikel ini:
Lihaf artikel penting berikut untuk contoh kode lengkap: