Előugró ablak hozzáadása a térképhez
Ez a cikk bemutatja, hogyan vehet fel előugró ablakokat a térkép egy pontjára.
A kód értelmezése
Az alábbi kód egy pontfunkciót name és description tulajdonságokat ad hozzá a térképhez egy szimbólumréteg használatával. Létrejön az előugró osztály egy példánya, de nem jelenik meg. A rendszer hozzáadja az egéreseményeket a szimbólumréteghez az előugró ablak megnyitásának és bezárásának aktiválásához. A jelölőszimbólum rámutatásakor az előugró ablak tulajdonsága position frissül a jelölő pozíciójával, és a content beállítás valamilyen HTML-kóddal frissül, amely körbefuttatja a name rámutatás alatt álló pontfunkció tulajdonságait és description tulajdonságait. Az előugró ablak ezután a függvényével open jelenik meg a térképen.
//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();
});
Több ponttal rendelkező előugró ablak újbóli használata
Vannak olyan esetek, amikor a legjobb módszer egy előugró ablak létrehozása és újbóli felhasználása. Előfordulhat például, hogy sok ponttal rendelkezik, és egyszerre csak egy előugró ablak jelenik meg. Az előugró ablak újbóli használatával az alkalmazás által létrehozott DOM-elemek száma jelentősen csökken, ami jobb teljesítményt biztosíthat. Az alábbi minta hárompontos szolgáltatásokat hoz létre. Ha bármelyiket kiválasztja, megjelenik egy előugró ablak az adott pont funkció tartalmával együtt.
Egy teljesen működőképes minta, amely bemutatja, hogyan hozható létre egy előugró ablak, és hogyan használhatja fel újra ahelyett, hogy előugró elemet hoz létre az egyes pontokhoz, olvassa el az Előugró ablak újbóli használata több tűvel az Azure Térképek-mintákban című témakört. A minta forráskódját lásd : Előugró ablak ismételt használata több pin-kóddal forráskóddal.
Előugró ablak testreszabása
Az előugró ablak alapértelmezés szerint fehér háttérrel, alul mutató nyíllal, a jobb felső sarokban pedig egy bezárás gombbal rendelkezik. Az alábbi minta az előugró ablak beállításával fekete színre módosítja a fillColor háttérszínt. A bezárás gombot a rendszer a false (hamis) értékre állításával CloseButton távolítja el. Az előugró ablak HTML-tartalma 10 képpontból álló kitöltést használ az előugró ablak szélétől. A szöveg fehér színű, így szépen megjelenik a fekete háttéren.
Az előugró ablakok megjelenésének testreszabását bemutató teljes körű mintaért tekintse meg az Előugró ablakok testreszabása az Azure Térképek-mintákban című témakört. A minta forráskódját az előugró forráskód testreszabása című témakörben találhatja meg.
Előugró sablonok hozzáadása a térképhez
Az előugró sablonok megkönnyítik az adatvezérelt elrendezések létrehozását az előugró ablakokhoz. Az alábbi szakaszok bemutatják, hogy különböző előugró sablonok használatával formázott tartalmakat hozhat létre a funkciók tulajdonságaival.
Megjegyzés:
Alapértelmezés szerint az előugró sablont használó összes tartalom biztonsági funkcióként egy iframe-kereten belül lesz védőfalba helyezve. Vannak azonban korlátozások:
- Minden szkript, űrlap, mutatózár és felső navigációs funkció le van tiltva. A hivatkozások kattintáskor megnyithatók egy új lapon.
- A régebbi böngészők, amelyek nem támogatják az
srcdociframe-ek paraméterét, kis mennyiségű tartalom megjelenítésére lesznek korlátozva.
Ha megbízik az előugró ablakokba betöltött adatokban, és azt szeretné, hogy az előugró ablakokba betöltött szkriptek hozzáférhessenek az alkalmazáshoz, letilthatja ezt úgy, hogy az előugró sablonok beállítását hamisra állítja sandboxContent .
Sztringsablon
A Sztringsablon a helyőrzőket a funkciótulajdonságok értékeire cseréli. A szolgáltatás tulajdonságait nem kell sztring típusú értékhez rendelni. Például value1 egy egész számot tartalmaz. Ezeket az értékeket ezután a rendszer átadja a rendszer a popupTemplatetartalomtulajdonságnak.
A numberFormat beállítás megadja a megjelenítendő szám formátumát. Ha nincs numberFormat megadva, a kód az előugró sablonok dátumformátumát használja. A numberFormat beállítás számokat formáz a Number.toLocaleString függvénnyel. Nagy számok formázásához fontolja meg a numberFormat NumberFormat.format függvényekkel való használatát. Az alábbi kódrészlet maximumFractionDigits például a törtjegyek számát kettőre korlátozza.
Megjegyzés:
A sztringsablon csak egy módon képes képeket renderelni. Először is a sztringsablonnak rendelkeznie kell egy képcímkével. A képcímkének átadott értéknek egy kép URL-címének kell lennie. Ezután a sztringsablonnak igaz értékre isImage kell állítania a HyperLinkFormatOptions. A isImage beállítás azt adja meg, hogy a hivatkozás egy képhez tartozik, és a hivatkozás be lesz töltve egy képcímkébe. Amikor a hivatkozásra kattint, megnyílik a kép.
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-sablon
A PropertyInfo sablon megjeleníti a funkció elérhető tulajdonságait. A label beállítás megadja a felhasználó számára megjelenítendő szöveget. Ha label nincs megadva, akkor megjelenik a hivatkozás. Ha pedig a hivatkozás kép, az "alt" címkéhez rendelt érték jelenik meg. A dateFormat dátum formátumát adja meg, és ha nincs megadva a dátumformátum, akkor a dátum sztringként jelenik meg. A hyperlinkFormat beállítás a kattintható hivatkozásokat jeleníti meg, hasonlóképpen, a email lehetőség használható a kattintható e-mail-címek megjelenítésére.
Mielőtt a PropertyInfo-sablon megjelenítené a tulajdonságokat a végfelhasználónak, rekurzívan ellenőrzi, hogy a tulajdonságok valóban definiálva vannak-e a funkcióhoz. Emellett figyelmen kívül hagyja a stílus- és címtulajdonságok megjelenítését is. Például nem jelenik meg color, size, anchor, strokeOpacityés visibility. Ha tehát a háttérrendszerben befejeződött a tulajdonságútvonal-ellenőrzés, a PropertyInfo-sablon táblaformátumban jeleníti meg a tartalmat.
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
});
Több tartalomsablon
Egy funkció a sztringsablon és a PropertyInfo sablon kombinációjával is megjeleníthet tartalmakat. Ebben az esetben a Sztringsablon a helyőrzőket fehér háttéren jeleníti meg. A PropertyInfo sablon pedig teljes szélességű képet jelenít meg egy táblán belül. A minta tulajdonságai hasonlóak az előző mintákban ismertetett tulajdonságokhoz.
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
});
Meghatározott sablon nélküli pontok
Ha az előugró sablon nincs sztringsablonként, PropertyInfo-sablonként vagy mindkettő kombinációjáként definiálva, akkor az alapértelmezett beállításokat használja. Ha az titledescription és az egyetlen hozzárendelt tulajdonság, az előugró sablon fehér hátteret, a jobb felső sarokban pedig egy bezárás gombot jelenít meg. A kis és közepes képernyőkön pedig egy lefelé mutató nyíl látható. Az alapértelmezett beállítások a táblán belül jelennek meg az összes olyan tulajdonságnál, amely nem az és a titledescription. Az előugró sablon még az alapértelmezett beállításokra való visszalépéskor is programozott módon módosítható. A felhasználók például kikapcsolhatják a hivatkozásészlelést, és az alapértelmezett beállítások továbbra is érvényesek lesznek más tulajdonságokra.
A futtatás után kiválaszthatja a térkép pontjait az előugró ablak megjelenítéséhez. A térképen található egy pont a következő előugró sablonokhoz: Sztringsablon, PropertyInfo-sablon és Több tartalomsablon. Három pontból is megtudhatja, hogyan jelennek meg a sablonok az alapértelmezett beállításokkal.
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);
}
}
}
Előugró sablon újrafelhasználása
Az előugró ablakok újrafelhasználásához hasonlóan újra felhasználhatja az előugró sablonokat. Ez a módszer akkor hasznos, ha egyszerre csak egy előugró sablont szeretne megjeleníteni több ponton. Az előugró sablonok újbóli használata csökkenti az alkalmazás által létrehozott DOM-elemek számát, és javítja az alkalmazások teljesítményét. Az alábbi minta ugyanazt az előugró sablont használja három ponthoz. Ha bármelyiket kiválasztja, megjelenik egy előugró ablak az adott pont funkció tartalmával együtt.
Ha egy olyan teljes körűen működőképes mintát szeretne használni, amely egy előugró sablont jelenít meg több olyan funkcióval, amelyek közös tulajdonságmezőket osztanak meg, tekintse meg az Előugró sablon újbóli használata az Azure Térképek-mintákban című témakört. A minta forráskódját az előugró sablon forráskódjának újrafelhasználása című témakörben talál.
Előugró események
Az előugró ablakok megnyithatók, bezárhatók és húzhatók. Az előugró osztály eseményeket biztosít, amelyek segítenek a fejlesztőknek reagálni ezekre az eseményekre. Az alábbi minta kiemeli, hogy mely események indulnak el a felhasználó megnyitásakor, bezárásakor vagy húzásakor.
Egy teljesen működőképes minta, amely bemutatja, hogyan adhat hozzá eseményeket az előugró ablakokhoz, tekintse meg az Előugró eseményeket az Azure Térképek-mintákban. A minta forráskódját lásd : Előugró események forráskódja.
Következő lépések
További információ a cikkben használt osztályokról és módszerekről:
A teljes kódmintákat az alábbi nagyszerű cikkekben tekinti meg: