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. 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: 'msft.ccsctp.net'
            }
        });
    </script>
    

    Para obtener más información, consulte autenticación con Azure Maps para obtener más detalles.For more information, see Authentication with Azure Maps for more details.

  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. Combinarlo todo el archivo HTML debe tener un aspecto similar 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. Debe ser similar al código siguiente:It should look like the following code:

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: