Lägga till ett popup-fönster på kartan
Den här artikeln visar hur du lägger till ett popup-fönster till en punkt på en karta.
Förstå koden
Följande kod lägger till en punktfunktion med name och description egenskaper på kartan med hjälp av ett symbolskikt. En instans av popup-klassen skapas men visas inte. Mushändelser läggs till i symbolskiktet för att utlösa öppning och stängning av popup-fönstret. När markörsymbolen hovrar uppdateras popup-egenskapen med markörens position position och content alternativet uppdateras med viss HTML som omsluter name egenskaperna och description för punktfunktionen som hovrar. Popup-fönstret visas sedan på kartan med hjälp av dess open funktion.
//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();
});
Återanvända ett popup-fönster med flera punkter
Det finns fall där den bästa metoden är att skapa ett popup-fönster och återanvända det. Du kan till exempel ha ett stort antal punkter och bara visa ett popup-fönster i taget. Genom att återanvända popup-fönstret minskas antalet DOM-element som skapats av programmet avsevärt, vilket kan ge bättre prestanda. Följande exempel skapar trepunktsfunktioner. Om du väljer någon av dem visas ett popup-fönster med innehållet för den punktfunktionen.
Ett fullständigt funktionellt exempel som visar hur du skapar ett popup-fönster och återanvänder det i stället för att skapa ett popup-fönster för varje punktfunktion finns i Återanvända popup-fönster med flera pins i Azure Kartor Samples. Källkoden för det här exemplet finns i Återanvända popup-fönster med källkod för flera pins.
Anpassa ett popup-fönster
Som standard har popup-fönstret en vit bakgrund, en pekarpil längst ned och en stängningsknapp i det övre högra hörnet. Följande exempel ändrar bakgrundsfärgen till svart med fillColor alternativet för popup-fönstret. Knappen Stäng tas bort genom att alternativet anges CloseButton till false. HTML-innehållet i popup-fönstret använder 10 bildpunkter från popup-fönstrets kanter. Texten är vit, så den visas fint på den svarta bakgrunden.
Ett fullständigt funktionellt exempel som visar hur du anpassar utseendet på ett popup-fönster finns i Anpassa ett popup-fönster i Azure Kartor Samples. Källkoden för det här exemplet finns i Anpassa en popup-källkod.
Lägga till popup-mallar på kartan
Popup-mallar gör det enkelt att skapa datadrivna layouter för popup-fönster. Följande avsnitt visar hur du använder olika popup-mallar för att generera formaterat innehåll med hjälp av egenskaper för funktioner.
Kommentar
Som standard kommer allt innehåll som återges att använda popup-mallen att vara begränsat i en iframe som en säkerhetsfunktion. Det finns dock begränsningar:
- Alla skript, formulär, pekarlås och de vanligaste navigeringsfunktionerna är inaktiverade. Länkar kan öppnas på en ny flik när du klickar på den.
- Äldre webbläsare som inte stöder parametern
srcdocpå iframes begränsas till att återge en liten mängd innehåll.
Om du litar på att data som läses in i popup-fönster och eventuellt vill att skripten ska läsas in i popup-fönster ska kunna komma åt ditt program kan du inaktivera detta genom att ange alternativet för popup-mallar sandboxContent till false.
Strängmall
Strängmallen ersätter platshållare med värden för funktionsegenskaperna. Egenskaperna för funktionen behöver inte tilldelas ett värde av typen Sträng. Innehåller value1 till exempel ett heltal. Dessa värden skickas sedan till innehållsegenskapen för popupTemplate.
Alternativet numberFormat anger formatet på talet som ska visas. Om inte numberFormat anges använder koden datumformatet popup-mallar. Alternativet numberFormat formaterar tal med funktionen Number.toLocaleString . Om du vill formatera stora tal bör du överväga att använda numberFormat alternativet med funktioner från NumberFormat.format. Koden som följer kodfragmentet använder maximumFractionDigits till exempel för att begränsa antalet bråksiffror till två.
Kommentar
Det finns bara ett sätt på vilket strängmallen kan återge bilder. Först måste strängmallen ha en avbildningstagg i den. Värdet som skickas till bildtaggen ska vara en URL till en bild. Sedan måste strängmallen ha isImage angetts till true i HyperLinkFormatOptions. Alternativet isImage anger att hyperlänken är för en bild, och hyperlänken läses in i en bildtagg. När hyperlänken klickas öppnas bilden.
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-mall
PropertyInfo-mallen visar tillgängliga egenskaper för funktionen. Alternativet label anger vilken text som ska visas för användaren. Om label inte anges visas hyperlänken. Och om hyperlänken är en bild visas värdet som tilldelats taggen "alt". dateFormat Anger datumformatet och om datumformatet inte har angetts återges datumet som en sträng. Alternativet hyperlinkFormat renderar klickbara länkar, på samma sätt email kan alternativet användas för att återge klickbara e-postadresser.
Innan PropertyInfo-mallen visar egenskaperna för slutanvändaren kontrollerar den rekursivt att egenskaperna verkligen har definierats för den funktionen. Den ignorerar även visning av format- och rubrikegenskaper. Den visar colortill exempel inte , size, anchor, strokeOpacityoch visibility. När kontrollen av egenskapssökvägen är klar i serverdelen visar propertyInfo-mallen innehållet i tabellformat.
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
});
Flera innehållsmallar
En funktion kan också visa innehåll med hjälp av en kombination av strängmallen och PropertyInfo-mallen. I det här fallet renderar strängmallen platshållarvärden på en vit bakgrund. Och PropertyInfo-mallen återger en bild med full bredd i en tabell. Egenskaperna i det här exemplet liknar de egenskaper som vi förklarade i föregående exempel.
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
});
Punkter utan en definierad mall
När popup-mallen inte har definierats som en Strängmall, en PropertyInfo-mall eller en kombination av båda, använder den standardinställningarna. title När och description är de enda tilldelade egenskaperna visar popup-mallen en vit bakgrund, en stängningsknapp i det övre högra hörnet. Och på små och medelstora skärmar visar den en pil längst ned. Standardinställningarna visas i en tabell för alla andra egenskaper än title och description. Även när du återgår till standardinställningarna kan popup-mallen fortfarande manipuleras programmatiskt. Användare kan till exempel inaktivera hyperlänkidentifiering och standardinställningarna gäller fortfarande för andra egenskaper.
När du har kört kan du välja punkterna på kartan för att se popup-fönstret. Det finns en punkt på kartan för var och en av följande popup-mallar: Strängmall, PropertyInfo-mall och Mall för flera innehåll. Det finns också tre punkter som visar hur mallar renderas med standardinställningarna.
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);
}
}
}
Återanvänd popup-mall
På samma sätt som när du återanvänder ett popup-fönster kan du återanvända popup-mallar. Den här metoden är användbar när du bara vill visa en popup-mall i taget för flera punkter. Om du återanvänder popup-mallar minskar antalet DOM-element som skapats av programmet, vilket förbättrar programmets prestanda. I följande exempel används samma popup-mall för tre punkter. Om du väljer någon av dem visas ett popup-fönster med innehållet för den punktfunktionen.
Ett fullständigt funktionellt exempel som visar frekvent återanvändning av en enda popup-mall med flera funktioner som delar en gemensam uppsättning egenskapsfält finns i Återanvänd en popup-mall i Azure Kartor Samples. Källkoden för det här exemplet finns i Återanvänd en källkod för en popup-mall.
Popup-händelser
Popup-fönster kan öppnas, stängas och dras. Popup-klassen innehåller händelser som hjälper utvecklare att reagera på dessa händelser. Följande exempel visar vilka händelser som utlöses när användaren öppnar, stänger eller drar popup-fönstret.
Ett fullständigt funktionellt exempel som visar hur du lägger till händelser i popup-fönster finns i Popup-händelser i Azure Kartor Samples. Källkoden för det här exemplet finns i Källkod för popup-händelser.
Nästa steg
Läs mer om de klasser och metoder som används i den här artikeln:
Se följande bra artiklar för fullständiga kodexempel: