Přidání místní nabídky k bodu na mapě

Článek
10/24/2023

Tento článek ukazuje, jak přidat automaticky otevírané okno na bod na mapě.

Vysvětlení kódu

Následující kód přidá funkci bodu s vlastnostmi a description vlastnostmi name na mapě pomocí vrstvy symbolů. Instance popup třídy je vytvořena, ale není zobrazena. Události myši se přidají do vrstvy symbolů, aby se aktivovalo otevírání a zavírání automaticky otevírané okno. Když je symbol značky najet myší, automaticky otevíraná position vlastnost se aktualizuje o pozici značky a content možnost se aktualizuje pomocí kódu HTML, který zabalí name a description vlastnosti funkce bodu, která je najeta myší. Automaticky otevírané okno se pak zobrazí na mapě pomocí funkce open .

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

Existují případy, kdy nejlepším přístupem je vytvořit jedno automaticky otevírané okno a znovu ho použít. Můžete mít například velký počet bodů a chcete najednou zobrazit jenom jedno místní okno. Opětovným použitím automaticky otevíraného okna se výrazně sníží počet prvků DOM vytvořených aplikací, což může zajistit lepší výkon. Následující ukázka vytvoří 3bodové funkce. Pokud vyberete některou z nich, zobrazí se automaticky otevírané okno s obsahem této funkce.

Plně funkční ukázka, která ukazuje, jak vytvořit jedno automaticky otevírané okno a znovu ho použít místo vytváření automaticky otevíraných oken pro jednotlivé funkce bodů, najdete v tématu Opětovné použití automaticky otevíraných oken s více piny v Azure Mapy Samples. Zdrojový kód pro tuto ukázku najdete v tématu Opětovné použití automaticky otevíraných oken se zdrojovým kódem s více piny.

Ve výchozím nastavení má místní nabídka bílé pozadí, šipku ukazatele v dolní části a tlačítko zavřít v pravém horním rohu. Následující ukázka změní barvu pozadí na černou pomocí fillColor možnosti místní nabídky. Tlačítko Zavřít se odebere nastavením CloseButton možnosti na false. Obsah HTML automaticky otevíraného okna používá vycpané 10 pixelů od okrajů místní nabídky. Text je bílý, takže se pěkně zobrazuje na černém pozadí.

Plně funkční ukázku, která ukazuje, jak přizpůsobit vzhled automaticky otevíraného okna, najdete v tématu Přizpůsobení automaticky otevíraných oken v Azure Mapy Samples. Zdrojový kód pro tuto ukázku naleznete v tématu Přizpůsobení automaticky otevírané zdrojového kódu.

Automaticky otevírané šablony usnadňují vytváření rozložení řízených daty pro automaticky otevírané okno. Následující části ukazují použití různých automaticky otevíraných šablon k vygenerování formátovaného obsahu pomocí vlastností funkcí.

Poznámka:

Ve výchozím nastavení bude veškerý obsah vykreslený pomocí automaticky otevírané šablony v izolovaném prostoru uvnitř prvku iframe jako funkce zabezpečení. Existují však omezení:

Všechny skripty, formuláře, zámek ukazatele a funkce horní navigace jsou zakázané. Odkazy se můžou otevřít na nové kartě po kliknutí.
Starší prohlížeče, které parametr v elementech iframe nepodporují srcdoc , budou omezené na vykreslení malého množství obsahu.

Pokud důvěřujete datům načteným do automaticky otevíraných oken a potenciálně chcete, aby tyto skripty načtené do automaticky otevíraných oken měly přístup k vaší aplikaci, můžete toto nastavení zakázat nastavením možnosti automaticky otevíraných šablon sandboxContent na hodnotu false.

Šablona řetězce

Šablona String nahrazuje zástupné symboly hodnotami vlastností funkce. Vlastnosti funkce nemusí být přiřazeny hodnotě typu String. Obsahuje například value1 celé číslo. Tyto hodnoty se pak předají vlastnosti obsahu objektu popupTemplate.

Možnost numberFormat určuje formát čísla, který se má zobrazit. numberFormat Pokud není zadaný, kód použije formát kalendářních dat automaticky otevíraných šablon. Možnost numberFormat formátuje čísla pomocí funkce Number.toLocaleString . Pokud chcete formátovat velká čísla, zvažte použití numberFormat možnosti s funkcemi z NumberFormat.format. Například následující fragment kódu používá maximumFractionDigits k omezení počtu desetinných míst na dvě.

Poznámka:

Existuje jen jeden způsob, jak šablona String může vykreslovat obrázky. Nejprve musí šablona String obsahovat značku obrázku. Hodnota předaná značce obrázku by měla být adresa URL obrázku. Pak musí isImage být šablona Řetězce nastavena na hodnotu true v souboru HyperLinkFormatOptions. Možnost isImage určuje, že hypertextový odkaz je pro obrázek a hypertextový odkaz se načte do značky obrázku. Po kliknutí na hypertextový odkaz se obrázek otevře.

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

Šablona PropertyInfo

Šablona PropertyInfo zobrazí dostupné vlastnosti funkce. Možnost label určuje text, který se má uživateli zobrazit. Pokud label není zadaný, zobrazí se hypertextový odkaz. A pokud je hypertextový odkaz obrázek, zobrazí se hodnota přiřazená ke značce alt. Určuje dateFormat formát data a pokud není zadaný formát data, zobrazí se datum jako řetězec. Možnost hyperlinkFormat vykresluje odkazy, na které lze kliknout, podobně lze tuto možnost použít k vykreslení e-mailových adres, email na které lze kliknout.

Než šablona PropertyInfo zobrazí vlastnosti koncovému uživateli, rekurzivně zkontroluje, zda jsou vlastnosti pro tuto funkci skutečně definovány. Ignoruje také zobrazování vlastností stylu a názvu. Například se nezobrazuje color, size, anchor, strokeOpacity, a visibility. Takže po dokončení kontroly cesty vlastností v back-endu se v šabloně PropertyInfo zobrazí obsah ve formátu tabulky.

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

Více šablon obsahu

Funkce může také zobrazit obsah pomocí kombinace šablony String a PropertyInfo šablony. V tomto případě šablona String vykreslí zástupné symboly hodnoty na bílém pozadí. A šablona PropertyInfo vykreslí obrázek s plnou šířkou uvnitř tabulky. Vlastnosti v této ukázce jsou podobné vlastnostem, které jsme vysvětlili v předchozích ukázkách.

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

Body bez definované šablony

Pokud není automaticky otevíraná šablona definována jako šablona string, šablona PropertyInfo nebo kombinace obou, použije výchozí nastavení. Pokud jsou title a description jsou jedinými přiřazenými vlastnostmi, automaticky otevíraná šablona zobrazí bílé pozadí, tlačítko zavřít v pravém horním rohu. A na malých a středních obrazovkách se v dolní části zobrazuje šipka. Výchozí nastavení se zobrazí v tabulce pro všechny vlastnosti kromě title a description. I když se vrátíte do výchozího nastavení, můžete automaticky otevíranou šablonu manipulovat programově. Uživatelé můžou například vypnout detekci hypertextových odkazů a výchozí nastavení by se stále použilo pro jiné vlastnosti.

Po spuštění můžete vybrat body na mapě a zobrazit tak místní okno. Na mapě je bod pro každou z následujících automaticky otevíraných šablon: Šablona řetězce, Šablona PropertyInfo a Více šablon obsahu. Existují také tři body, které ukazují, jak se šablony vykreslují pomocí výchozího nastavení.

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

Podobně jako při opětovném použití automaticky otevíraných oken můžete znovu použít automaticky otevírané šablony. Tento přístup je užitečný, pokud chcete zobrazit jenom jednu automaticky otevíranou šablonu najednou pro více bodů. Opakované použití automaticky otevíraných šablon snižuje počet prvků MODELU DOM vytvořených aplikací, což zlepšuje výkon vašich aplikací. Následující ukázka používá stejnou místní šablonu pro tři body. Pokud vyberete některou z nich, zobrazí se automaticky otevírané okno s obsahem této funkce.

Plně funkční ukázku, která ukazuje horké opakované použití jedné místní šablony s více funkcemi, které sdílejí společnou sadu polí vlastností, najdete v tématu Opětovné použití místní šablony v Azure Mapy Samples. Zdrojový kód pro tuto ukázku najdete v tématu Opětovné použití zdrojového kódu místní šablony.

Automaticky otevírané okno je možné otevřít, zavřít a přetáhnout. Automaticky otevíraná třída poskytuje události, které vývojářům pomůžou na tyto události reagovat. Následující ukázka zvýrazní, které události se aktivují při otevření, zavření nebo přetažení automaticky otevíraných oken.

Plně funkční ukázku, která ukazuje, jak přidat události do automaticky otevíraných oken, najdete v tématu Překryvné události v Azure Mapy Samples. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu událostí překryvné okno.