Uso del control de mapa de Azure MapsUse the Azure Maps map control

La biblioteca de Javascript del lado cliente del Control de mapa le permite representar mapas y la funcionalidad insertada de Azure Maps en su aplicación web o móvil.The Map Control client-side Javascript library allows you to render maps and embedded Azure Maps functionality into your web or mobile application.

Creación de un nuevo mapa en una página webCreate a new map in a web page

Puede insertar un mapa en una página web mediante la biblioteca de Javascript del lado cliente de Control de mapa.You can embed a map in a web page by using the Map Control client-side Javascript library.

  1. Cree un archivo HTML.Create a new HTML file.

  2. Cárguelo en el SDK web de Azure Maps.Load in the Azure Maps Web SDK. Esto se puede hacer mediante una de estas dos opciones.This can be done using one of two options;

    a.a. Use la versión de CDN hospedada globalmente del SDK web de Azure Maps mediante la adición de los puntos de conexión de direcciones URL a las referencias de script y de hojas de estilo en el elemento <head> del archivo:Use the globally hosted CDN version of the Azure Maps Web SDK by adding the URL endpoints to the stylesheet and script references in the <head> element of the file:

    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    

    b.b. Opcionalmente, puede cargar localmente el código fuente del SDK web de Azure Maps mediante el paquete NPM azure-maps-control y hospedarlo con la aplicación.Alternatively, load the Azure Maps Web SDK source code locally using the azure-maps-control NPM package and host it with your app. Este paquete también incluye las definiciones de TypeScript.This package also includes TypeScript definitions.

    npm install azure-maps-controlnpm install azure-maps-control

    Agregue las referencias de hoja de estilos y origen de script de Azure Maps al elemento <head> del archivo:Then add references to the Azure Maps stylesheet and script source references to the <head> element of the file:

    <link rel="stylesheet" href="node_modules/azure-maps-control/dist/css/atlas.min.css" type="text/css">
    <script src="node_modules/azure-maps-control/dist/js/atlas.min.js"></script>
    
  3. Para representar el mapa para que rellene el cuerpo completo de la página, agregue el siguiente elemento <style> al elemento <head>.To render the map so that it fills the full body of the page, add the following <style> element to the <head> element.

    <style>
        html, body {
            margin: 0;
        }
    
        #myMap {
            height: 100vh;
            width: 100vw;
        }
    </style>
    
  4. En el cuerpo de la página, agregue un elemento <div> y asígnele un id de myMap.In the body of the page, add a <div> element and give it an id of myMap.

    <body>
        <div id="myMap"></div>
    </body>
    
  5. Para inicializar el control de mapa, defina una nueva sección en el cuerpo HTML y cree un script.To initialize the map control, define a new section in the html body and create a script. Pase el id del mapa <div> o un HTMLElement (por ejemplo, document.getElementById('myMap')) como primer parámetro al crear una instancia de la clase Map.Pass in the id of the map <div> or an HTMLElement (for example, document.getElementById('myMap')) as the first parameter when creating an instance of the Map class. Use su propia clave de cuenta de Azure Maps o las credenciales de Azure Active Directory (AAD) para autenticar el mapa mediante las opciones de autenticación.Use your own Azure Maps account key or Azure Active Directory (AAD) credentials to authenticate the map using authentication options. Si necesita crear una cuenta o buscar la clave, consulte Cómo administrar su cuenta y claves de Azure Maps.If you need to create an account or find your key, see How to manage your Azure Maps account and keys. La opción de idioma especifica el idioma que se usará para las etiquetas de mapa y los controles.The language option specifies the language to be used for map labels and controls. Para información sobre los idiomas admitidos, consulte Idiomas admitidos en Azure Maps.For more information on supported languages, see supported languages. Si usa una clave de suscripción para la autenticación.If using a subscription key for authentication.

    <script type="text/javascript">
        var map = new atlas.Map('myMap', {
            center: [-122.33, 47.6],
            zoom: 12,
            language: 'en-US',
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '<Your Azure Maps Key>'
            }
        });
    </script>
    

    Si usa Azure Active Directory (AAD) para la autenticación:If using Azure Active Directory (AAD) for authentication:

    <script type="text/javascript">
        var map = new atlas.Map('myMap', {
            center: [-122.33, 47.6],
            zoom: 12,
            language: 'en-US',
            authOptions: {
                authType: 'aad',
                clientId: '<Your AAD Client Id>',
                aadAppId: '<Your AAD App Id>',
                aadTenant: '<Your AAD Tenant Id>'
            }
        });
    </script>
    

    Para obtener más información, consulte el documento Autenticación con Azure Maps.For more information, see the Authentication with Azure Maps document.

  6. Opcionalmente, puede que agregar los siguientes elementos de la etiqueta meta al encabezado de la página le resulte útil:Optionally, you may find adding the following meta tag elements to the head of your page helpful:

    <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    
    <!-- Ensures the web page looks good on all screen sizes. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
  7. Si combina todo, el archivo HTML debería ser parecido al código siguiente:Putting it all together your HTML file should look something like the following code:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <meta charset="utf-8">
    
        <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
        <meta http-equiv="x-ua-compatible" content="IE=Edge">
    
        <!-- Ensures the web page looks good on all screen sizes. -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
        <style>
            html, body {
                margin: 0;
            }
    
            #myMap {
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <div id="myMap"></div>
    
        <script type="text/javascript">
            //Create an instance of the map control and set some options.
            var map = new atlas.Map('myMap', {
                center: [-122.33, 47.6],
                zoom: 12,
                language: 'en-US',
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });
        </script>
    </body>
    </html>
    
  8. Abra el archivo en el explorador web y vea el mapa representado.Open the file in your web browser and view the rendered map. Debería ser similar al código siguiente:It should look like the following code:

Localización del mapaLocalizing the map

Azure Maps proporciona dos formas diferentes de establecer el idioma y la vista regional del mapa.Azure Maps provides two different ways of setting the language and regional view of the map. La primera opción es agregar esta información al espacio de nombres atlas global, lo que provocará que estos valores son los predeterminados en todas las instancias de control de mapa de la aplicación.The first option is to add this information to the global atlas namespace, which will result in all map control instances in your app defaulting to these settings. El código siguiente establece el idioma en francés ("fr-FR") y la vista regional en "auto":The following sets the language to French ("fr-FR") and the regional view to "auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

La segunda opción consiste en usar esta información a las opciones del mapa al cargar el mapa como:The second option is to pass this information into the map options when loading the map like:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'aad',
        clientId: '<Your AAD Client Id>',
        aadAppId: '<Your AAD App Id>',
        aadTenant: '<Your AAD Tenant Id>'
    }
});

Nota

Con el SDK web es posible cargar varias instancias del mapa con diferentes configuraciones de idioma y región.With the Web SDK it is possible to load multiple map instances on the same page with different language and region settings. Además, esta configuración se puede actualizar después de que se haya cargado el mapa mediante la función setStyle del mapa.Additionally, these settings can be update after the map has loaded by using the setStyle function of the map.

Este es un ejemplo de Azure Maps con el idioma establecido en "fr-FR" y la vista regional establecida en "auto".Here is an example of Azure Maps with the language set to "fr-FR" and the regional view set to "auto".

Imagen del mapa que muestra las etiquetas en francés

Aquí encontrará una lista completa de los idiomas y vistas regionales admitidos.A complete list of supported languages and regional views is documented here.

Pasos siguientesNext steps

Aprenda a crear e interactuar con un mapa:Learn how to create and interact with a map:

Obtenga información sobre cómo aplicar estilos en un mapa:Learn how to style a map:

Para agregar más datos al mapa:To add more data to your map: