Een pop-up toevoegen aan een punt op een kaart

Artikel
10/24/2023

In dit artikel wordt beschreven hoe u een pop-up toevoegt aan een punt op een kaart.

De code begrijpen

Met de volgende code wordt een puntfunctie met name en description eigenschappen aan de kaart toegevoegd met behulp van een symboollaag. Er wordt een exemplaar van de pop-upklasse gemaakt, maar niet weergegeven. Muis gebeurtenissen worden toegevoegd aan de symboollaag om het openen en sluiten van de pop-up te activeren. Wanneer het markeringssymbool aanwijst, wordt de eigenschap van position de pop-up bijgewerkt met de positie van de markering en wordt de content optie bijgewerkt met html die de name en description eigenschappen van de puntfunctie verpakt die wordt aanwijst. De pop-up wordt vervolgens op de kaart weergegeven met behulp van open de bijbehorende functie.

//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();
});

Er zijn gevallen waarin de beste methode is om één pop-up te maken en opnieuw te gebruiken. U hebt bijvoorbeeld een groot aantal punten en wilt slechts één pop-up tegelijk weergeven. Door de pop-up opnieuw te gebruiken, wordt het aantal DOM-elementen dat door de toepassing is gemaakt aanzienlijk verminderd, wat betere prestaties kan bieden. In het volgende voorbeeld worden driepuntsfuncties gemaakt. Als u een van deze opties selecteert, wordt er een pop-up weergegeven met de inhoud voor die puntfunctie.

Voor een volledig functioneel voorbeeld waarin wordt getoond hoe u één pop-up maakt en deze opnieuw gebruikt in plaats van een pop-up te maken voor elke puntfunctie, raadpleegt u Pop-up hergebruiken met meerdere pinnen in azure Kaarten Voorbeelden. Zie Pop-upvenster Hergebruiken met broncode voor meerdere spelden voor de broncode voor de broncode van dit voorbeeld.

De pop-up heeft standaard een witte achtergrond, een pijl aanwijzer onderaan en een knop Sluiten in de rechterbovenhoek. In het volgende voorbeeld wordt de achtergrondkleur gewijzigd in zwart met behulp van de fillColor optie van de pop-up. De knop Sluiten wordt verwijderd door de CloseButton optie in te stellen op False. De HTML-inhoud van de pop-up maakt gebruik van 10 pixels vanaf de randen van de pop-up. De tekst is wit gemaakt, dus deze wordt mooi weergegeven op de zwarte achtergrond.

Zie Een pop-up aanpassen in de Voorbeelden van Azure Kaarten voor een volledig functioneel voorbeeld waarin wordt getoond hoe u het uiterlijk van een pop-up kunt aanpassen. Zie Een pop-upbroncode aanpassen voor de broncode voor dit voorbeeld.

Met pop-upsjablonen kunt u eenvoudig gegevensgestuurde indelingen maken voor pop-ups. In de volgende secties ziet u hoe u verschillende pop-upsjablonen kunt gebruiken om opgemaakte inhoud te genereren met behulp van eigenschappen van functies.

Notitie

Standaard wordt voor alle inhoud die wordt weergegeven, de pop-upsjabloon in de sandbox geplaatst in een iframe als beveiligingsfunctie. Er zijn echter beperkingen:

Alle scripts, formulieren, aanwijzervergrendeling en de bovenste navigatiefunctionaliteit zijn uitgeschakeld. Koppelingen kunnen worden geopend op een nieuw tabblad wanneer erop wordt geklikt.
Oudere browsers die de srcdoc parameter op iframes niet ondersteunen, worden beperkt tot het weergeven van een kleine hoeveelheid inhoud.

Als u de gegevens vertrouwt die in de pop-ups worden geladen en mogelijk wilt dat deze scripts in pop-ups worden geladen, kunt u dit uitschakelen door de optie pop-upsjablonen sandboxContent in te stellen op onwaar.

Tekenreekssjabloon

De tekenreekssjabloon vervangt tijdelijke aanduidingen door waarden van de functie-eigenschappen. Aan de eigenschappen van de functie hoeft geen waarde van het type Tekenreeks te worden toegewezen. Bevat bijvoorbeeld value1 een geheel getal. Deze waarden worden vervolgens doorgegeven aan de inhoudseigenschap van de popupTemplate.

Met numberFormat de optie geeft u de notatie op van het getal dat moet worden weergegeven. Als de numberFormat waarde niet is opgegeven, gebruikt de code de datumnotatie van de pop-upsjablonen. Met numberFormat de optie worden getallen opgemaakt met de functie Number.toLocaleString . Als u grote getallen wilt opmaken, kunt u overwegen de numberFormat optie te gebruiken met functies uit NumberFormat.format. De code die het volgende codefragment gebruikt, wordt bijvoorbeeld gebruikt maximumFractionDigits om het aantal breukcijferen te beperken tot twee.

Notitie

Er is slechts één manier waarop de tekenreekssjabloon afbeeldingen kan weergeven. Eerst moet de tekenreekssjabloon een afbeeldingstag bevatten. De waarde die wordt doorgegeven aan de afbeeldingstag, moet een URL naar een afbeelding zijn. Vervolgens moet de tekenreekssjabloon zijn isImage ingesteld op true in de HyperLinkFormatOptions. De isImage optie geeft aan dat de hyperlink voor een afbeelding is en dat de hyperlink wordt geladen in een afbeeldingstag. Wanneer op de hyperlink wordt geklikt, wordt de afbeelding geopend.

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-sjabloon

In de PropertyInfo-sjabloon worden beschikbare eigenschappen van de functie weergegeven. Met label de optie geeft u de tekst op die aan de gebruiker moet worden weergegeven. Als label dit niet is opgegeven, wordt de hyperlink weergegeven. En als de hyperlink een afbeelding is, wordt de waarde die is toegewezen aan de tag Alt weergegeven. Hiermee dateFormat geeft u de notatie van de datum op en als de datumnotatie niet is opgegeven, wordt de datum weergegeven als een tekenreeks. De hyperlinkFormat optie geeft klikbare koppelingen weer, op dezelfde manier, de email optie kan worden gebruikt om klikbare e-mailadressen weer te geven.

Voordat de PropertyInfo-sjabloon de eigenschappen weergeeft aan de eindgebruiker, controleert deze recursief of de eigenschappen inderdaad voor die functie zijn gedefinieerd. Het negeert ook het weergeven van stijl- en titeleigenschappen. Het wordt bijvoorbeeld niet weergegevencolor, , , anchoren strokeOpacityvisibility. size Zodra het controleren van het eigenschapspad is voltooid in de back-end, toont de PropertyInfo-sjabloon de inhoud in een tabelindeling.

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
});

Meerdere inhoudssjablonen

Een functie kan ook inhoud weergeven met behulp van een combinatie van de tekenreekssjabloon en de PropertyInfo-sjabloon. In dit geval geeft de tekenreekssjabloon tijdelijke aanduidingen waarden weer op een witte achtergrond. En met de PropertyInfo-sjabloon wordt een afbeelding met volledige breedte weergegeven in een tabel. De eigenschappen in dit voorbeeld zijn vergelijkbaar met de eigenschappen die we in de vorige voorbeelden hebben uitgelegd.

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
});

Punten zonder gedefinieerde sjabloon

Wanneer de pop-upsjabloon niet is gedefinieerd als een tekenreekssjabloon, een PropertyInfo-sjabloon of een combinatie van beide, worden de standaardinstellingen gebruikt. Wanneer de title en description de enige toegewezen eigenschappen zijn, toont de pop-upsjabloon een witte achtergrond, een knop Sluiten in de rechterbovenhoek. En op kleine en middelgrote schermen ziet u een pijl onderaan. De standaardinstellingen worden weergegeven in een tabel voor alle andere eigenschappen dan de title en de description. Zelfs wanneer u terugvalt op de standaardinstellingen, kan de pop-upsjabloon nog steeds programmatisch worden bewerkt. Gebruikers kunnen bijvoorbeeld de detectie van hyperlinks uitschakelen en de standaardinstellingen zijn nog steeds van toepassing op andere eigenschappen.

Zodra deze is uitgevoerd, kunt u de punten op de kaart selecteren om het pop-upvenster te zien. Er is een punt op de kaart voor elk van de volgende pop-upsjablonen: Tekenreekssjabloon, PropertyInfo-sjabloon en sjabloon voor meerdere inhoud. Er zijn ook drie punten om weer te geven hoe sjablonen worden weergegeven met behulp van de standaardinstellingen.

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);
    }
  }
}

Net als bij het hergebruik van een pop-up kunt u pop-upsjablonen opnieuw gebruiken. Deze methode is handig als u slechts één pop-upsjabloon tegelijk wilt weergeven voor meerdere punten. Het hergebruik van pop-upsjablonen vermindert het aantal DOM-elementen dat door de toepassing is gemaakt, waardoor de prestaties van uw toepassingen worden verbeterd. In het volgende voorbeeld wordt dezelfde pop-upsjabloon gebruikt voor drie punten. Als u een van deze opties selecteert, wordt er een pop-up weergegeven met de inhoud voor die puntfunctie.

Zie Een pop-upsjabloon opnieuw gebruiken in de Azure Kaarten Samples voor een volledig functioneel voorbeeld met meerdere functies die een gemeenschappelijke set eigenschappenvelden delen. Zie De broncode van een pop-upsjabloon opnieuw gebruiken voor de broncode voor dit voorbeeld.

Pop-ups kunnen worden geopend, gesloten en gesleept. De pop-upklasse biedt gebeurtenissen om ontwikkelaars te helpen reageren op deze gebeurtenissen. In het volgende voorbeeld ziet u welke gebeurtenissen worden geactiveerd wanneer de gebruiker wordt geopend, gesloten of de pop-up sleept.

Zie Pop-upgebeurtenissen in de Voorbeelden van Azure Kaarten voor een volledig functioneel voorbeeld waarin wordt getoond hoe u gebeurtenissen toevoegt aan pop-ups. Zie De broncode van pop-upgebeurtenissen voor de broncode voor dit voorbeeld.