Samouczek: migrowanie aplikacji internetowej z usługi Google Maps

2025-04-21

Większość aplikacji internetowych, które korzystają z usługi Google Maps, korzysta z zestawu SDK JavaScript usługi Google Maps w wersji 3. Zestaw SDK dla sieci Web Azure Maps jest odpowiedni do migracji na platformę Azure. Zestaw SDK sieci Web usługi Azure Maps umożliwia dostosowywanie interaktywnych map przy użyciu własnej zawartości i obrazów. Aplikację można uruchomić zarówno w aplikacjach internetowych, jak i mobilnych. Kontrolka korzysta z technologii WebGL, co umożliwia renderowanie dużych zestawów danych z wysoką wydajnością. Programowanie przy użyciu tego zestawu SDK przy użyciu języka JavaScript lub TypeScript. W tym samouczku przedstawiono następujące elementy:

Ładowanie mapy
Lokalizowanie mapy
Dodaj znaczniki, linie łamane i wielokąty.
Wyświetlanie informacji w oknie podręcznym lub panelu informacyjnym
Ładowanie i wyświetlanie danych KML i GeoJSON
Znaczniki klastra
Nakładanie warstwy kafelkowej
Wyświetlanie danych o ruchu
Dodaj nakładkę naziemną

Ponadto:

Jak wykonywać typowe zadania mapowania przy użyciu zestawu Web SDK usługi Azure Maps.
Najlepsze rozwiązania dotyczące poprawy wydajności i środowiska użytkownika.
Porady dotyczące korzystania z bardziej zaawansowanych funkcji dostępnych w usłudze Azure Maps.

Jeśli migruje istniejącą aplikację internetową, sprawdź, czy używa ona biblioteki kontrolek mapy typu open source. Przykłady biblioteki kontrolek map typu open source to: Cesium, Ulotka i OpenLayers. Nadal możesz migrować aplikację, nawet jeśli używa ona biblioteki kontrolek mapy typu open source i nie chcesz używać zestawu Sdk sieci Web usługi Azure Maps. W takim przypadku połącz aplikację z usługami Azure Maps Render (kafelki dróg | kafelki satelitarne). W poniższych punktach szczegółowo opisano sposób używania usługi Azure Maps w niektórych powszechnie używanych bibliotekach kontrolek map typu open source.

Cesium — kontrolka mapy 3D dla sieci Web. Dokumentacja cezu.
Ulotka — uproszczona kontrolka mapy 2D dla sieci Web. Przykład kodu Leaflet | Dokumentacja Leaflet.
OpenLayers — kontrolka mapy 2D dla sieci Web, która obsługuje projekcje. Dokumentacja platformy OpenLayers.

W przypadku programowania przy użyciu platformy JavaScript może być przydatne jedno z następujących projektów typu open source:

ng-azure-maps — opakowanie Angular 10 dla Azure Maps.
AzureMapsControl.Components — składnik blazor usługi Azure Maps.
Składnik React w usłudze Azure Maps — otoka react dla kontrolki usługi Azure Maps.
Vue Azure Maps — składnik usługi Azure Maps dla aplikacji Vue.

Wymagania wstępne

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Uwaga

Aby uzyskać więcej informacji na temat uwierzytelniania w usłudze Azure Maps, zobacz Zarządzanie uwierzytelnianiem w usłudze Azure Maps.

Obsługa kluczowych funkcji

W tabeli wymieniono kluczowe funkcje interfejsu API w zestawie SDK języka JavaScript usługi Google Maps w wersji 3 oraz obsługiwaną funkcję interfejsu API w zestawie SDK internetowym usługi Azure Maps.

Funkcja Mapy Google	Obsługa zestawu Web SDK usługi Azure Maps
Znaczniki	✓
Klastrowanie znaczników	✓
Wielokąty i wielokąty	✓
Warstwy danych	✓
Nakładki naziemne	✓
Mapy cieplne	✓
Warstwy kafelków	✓
Warstwa KML	✓
Narzędzia do rysowania	✓
Usługa geokodera	✓
Usługa nawigacji	✓
Usługa macierzy odległości	✓

Znaczące różnice w Web SDKs

Poniżej przedstawiono niektóre kluczowe różnice między zestawami SDK usługi Google Maps i Zestawami SDK sieci Web usługi Azure Maps, które należy pamiętać o następujących kwestiach:

Oprócz udostępniania hostowanego punktu końcowego na potrzeby uzyskiwania dostępu do zestawu Web SDK usługi Azure Maps dostępny jest pakiet npm. Aby uzyskać więcej informacji na temat osadzania pakietu zestawu SDK sieci Web w aplikacjach, zobacz Używanie kontrolki mapy usługi Azure Maps. Ten pakiet zawiera również definicje języka TypeScript.
Najpierw należy utworzyć wystąpienie klasy Map w usłudze Azure Maps. Poczekaj, aż mapy ready lub load zdarzenie zostanie wyzwolony przed programowym interakcją z mapą. Ta kolejność gwarantuje, że wszystkie zasoby mapy zostały załadowane i będą gotowe do uzyskania dostępu.
Obie platformy używają podobnego systemu kafelków dla map bazowych. Kafelki w mapach Google mają wymiar 256 pikseli; jednak kafelki w usłudze Azure Maps mają wymiar 512 pikseli. Aby uzyskać ten sam widok mapy w usłudze Azure Maps co Google Maps, odejmij poziom powiększenia mapy Google według liczby jednej w usłudze Azure Maps.
Współrzędne w usłudze Google Maps są określane jako latitude,longitude, podczas gdy usługa Azure Maps używa funkcji longitude,latitude. Format usługi Azure Maps jest zgodny ze standardem [x, y], który jest zgodny z większością platform GIS.
Kształty w zestawie SDK internetowym usługi Azure Maps są oparte na schemacie GeoJSON. Klasy pomocnika są udostępniane za pośrednictwem przestrzeni nazw atlas.data . Jest również atlas. Klasa Kształtu . Ta klasa służy do zawijania obiektów GeoJSON, aby ułatwić aktualizowanie i konserwowanie danych w możliwy do powiązania sposób.
Współrzędne w usłudze Azure Maps są definiowane jako obiekty pozycji. Współrzędna jest określana jako tablica liczbowa w formacie [longitude,latitude]. Albo zostaje określony za pomocą nowej wartości atlas.data.Position(długość geograficzna, szerokość geograficzna).

Napiwek

Klasa Position ma statyczną metodę pomocnika do importowania współrzędnych w formacie "szerokość geograficzna, długość geograficzna". Metoda atlas.data.Position.fromLatLng może być często zastępowana new google.maps.LatLng metodą w kodzie usługi Google Maps.
Zamiast określać informacje o stylach dla każdego kształtu dodawanego do mapy, usługa Azure Maps oddziela style od danych. Dane są przechowywane w źródle danych i są połączone z warstwami renderowania. Kod usługi Azure Maps używa źródeł danych do renderowania danych. Takie podejście zapewnia zwiększoną korzyść z wydajności. Ponadto wiele warstw obsługuje style oparte na danych, w których logika biznesowa może zostać dodana do opcji stylu warstwy. To wsparcie zmienia sposób renderowania poszczególnych kształtów w warstwie na podstawie właściwości zdefiniowanych w kształcie.

Przykłady Web SDK zestawione obok siebie

Ta kolekcja zawiera przykłady kodu dla każdej platformy, a każdy przykład obejmuje typowy przypadek użycia. Ma ona ułatwić migrację aplikacji internetowej z zestawu SDK JavaScript usługi Google Maps w wersji 3 do zestawu SDK sieci Web usługi Azure Maps. Przykłady kodu związane z aplikacjami internetowymi są udostępniane w języku JavaScript. Jednak usługa Azure Maps udostępnia również definicje języka TypeScript jako inną opcję za pośrednictwem modułu npm.

Tematy

Ładowanie mapy
Lokalizowanie mapy
Ustawianie widoku mapy
Dodawanie znacznika
Dodawanie znacznika niestandardowego
Dodawanie wielolinii
Dodawanie wielokąta
Wyświetlanie okna informacji
Importowanie pliku GeoJSON
Klastrowanie znaczników
Dodawanie mapy cieplnej
Nałożyć warstwę kafelków
Pokaż dane ruchu
Dodawanie nakładki naziemnej
Dodawanie danych KML do mapy

Ładowanie mapy

Oba zestawy SDK mają te same kroki, aby załadować mapę:

Dodaj odwołanie do pakietu SDK dla map.
Dodaj znacznik div do treści strony, który działa jako symbol zastępczy dla mapy.
Utwórz funkcję Języka JavaScript, która jest wywoływana po załadowaniu strony.
Utwórz instancję klasy odpowiedniej mapy.

Niektóre kluczowe różnice

Usługa Google Maps wymaga podania klucza konta w dokumentacji skryptu interfejsu API. Poświadczenia uwierzytelniania dla usługi Azure Maps są określane jako opcje klasy mapy. To poświadczenie może być kluczem subskrypcji lub informacjami firmy Microsoft Entra.
Usługa Google Maps akceptuje funkcję wywołania zwrotnego w dokumentacji skryptu interfejsu API, która służy do wywoływania funkcji inicjowania w celu załadowania mapy. W usłudze Azure Maps należy użyć zdarzenia ładowania strony.
Podczas odwoływania się do elementu div, w którym jest renderowana mapa, klasa Map w usłudze Azure Maps wymaga tylko wartości id, podczas gdy usługa Google Maps wymaga obiektu HTMLElement.
Współrzędne w usłudze Azure Maps są definiowane jako obiekty pozycji, które można określić jako prostą tablicę liczbową w formacie [longitude, latitude].
Poziom powiększenia w usłudze Azure Maps jest na poziomie niższym niż poziom powiększenia w usłudze Google Maps. Ta rozbieżność wynika z różnicy w rozmiarach systemu układania płytek na dwóch platformach.
Usługa Azure Maps nie dodaje żadnych kontrolek nawigacji do kanwy mapy. Domyślnie mapa nie ma przycisków powiększenia i przycisków stylu mapy. Istnieją jednak opcje sterowania do dodawania selektora stylów mapy, przycisków powiększenia, kompasu lub kontrolki obrotu oraz kontrolki nachylenia.
Do usługi Azure Maps dodaje się obsługę zdarzeń, aby monitorować ready zdarzenia instancji mapy. To zdarzenie jest uruchamiane po tym jak zakończy się ładowanie kontekstu WebGL oraz wszystkich wymaganych zasobów. Dodaj dowolny kod, który chcesz uruchomić po zakończeniu ładowania mapy, do tej procedury obsługi zdarzeń.

W poniższych przykładach używa się map Google do załadowania mapy wyśrodkowanej na Nowym Jorku na podanych współrzędnych. Długość geograficzna: -73,985, szerokość geograficzna: 40,747, a mapa jest na poziomie powiększenia 12.

Wcześniej: Mapy Google

Wyświetl mapę Google, która jest wyśrodkowana i powiększona nad lokalizacją.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uruchomienie tego kodu w przeglądarce wyświetla mapę, która wygląda jak na poniższej ilustracji:

Proste mapy Google

Po: Azure Maps

Załaduj mapę z tym samym widokiem w usłudze Azure Maps wraz z kontrolką stylu mapy i przyciskami powiększenia.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.74],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Specify authentication information when loading the map.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uruchomienie tego kodu w przeglądarce wyświetla mapę, która wygląda jak na poniższej ilustracji:

Prosta usługa Azure Maps

Aby uzyskać więcej informacji na temat konfigurowania i używania kontrolki mapy usługi Azure Maps w aplikacji internetowej, zobacz Używanie kontrolki mapy usługi Azure Maps.

Uwaga

W przeciwieństwie do usługi Google Maps usługa Azure Maps nie wymaga początkowego środka i poziomu powiększenia w celu załadowania mapy. Jeśli te informacje nie zostaną podane podczas ładowania mapy, usługa Azure Maps spróbuje określić miasto użytkownika. Spowoduje to wyśrodkowanie i powiększenie mapy.

Więcej zasobów:

Aby uzyskać więcej informacji na temat kontrolek nawigacji na potrzeby rotacji i rozmielenia widoku mapy, zobacz Dodawanie kontrolek do mapy.

Lokalizowanie mapy

Jeśli Twoi odbiorcy są rozproszeni po wielu krajach/regionach lub używają różnych języków, lokalizacja ma istotne znaczenie.

Wcześniej: Mapy Google

Aby zlokalizować mapy Google, dodaj parametry języka i regionu.

<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js?callback=initMap&key={api-Key}&language={language-code}&region={region-code}" async defer></script>

Oto przykład map Google z językiem ustawionym na "fr-FR".

Lokalizacja usługi Google Maps

Po: Azure Maps

Usługa Azure Maps udostępnia dwa różne sposoby ustawiania języka i widoku regionalnego mapy. Pierwszą opcją jest dodanie tych informacji do globalnej przestrzeni nazw atlas. Powoduje to, że wszystkie wystąpienia kontrolek mapy w aplikacji są domyślnie ustawione na te ustawienia. Poniżej ustawiono język na francuski ("fr-FR") i opcję widoku regionalnego na "Auto":

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

Drugą opcją jest przekazanie tych informacji do opcji mapy podczas ładowania mapy. Jak to:

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

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Uwaga

W usłudze Azure Maps można załadować wiele wystąpień mapy na tej samej stronie z różnymi ustawieniami języka i regionu. Można również zaktualizować te ustawienia na mapie po załadowaniu.

Aby uzyskać więcej informacji na temat obsługiwanych języków, zobacz Obsługa lokalizacji w usłudze Azure Maps.

Oto przykład usługi Azure Maps z językiem ustawionym na wartość "fr" i region użytkownika ustawiony na wartość "fr-FR".

Ustawianie widoku mapy

Mapy dynamiczne zarówno na platformie Azure, jak i w usłudze Google Maps można programowo przenosić do nowych lokalizacji geograficznych. W tym celu wywołaj odpowiednie funkcje w języku JavaScript. W przykładach pokazano, jak sprawić, aby mapa wyświetlała zdjęcia satelitarne, wyśrodkować mapę w lokalizacji i zmienić poziom powiększenia na 15 w usłudze Google Maps. Używane są następujące współrzędne lokalizacji: długość geograficzna: -111.0225 i szerokość geograficzna: 35.0272.

Uwaga

Usługa Google Maps używa kafelków o wymiarach 256 pikseli, podczas gdy usługa Azure Maps używa większego kafelka o rozmiarze 512 pikseli. W związku z tym usługa Azure Maps wymaga mniejszej liczby żądań sieciowych, aby załadować ten sam obszar mapy co mapy Google. Ze względu na sposób działania piramid kafelków w kontrolkach mapy należy odjąć poziom powiększenia używany w usłudze Google Maps przez numer jeden podczas korzystania z usługi Azure Maps. Ta operacja arytmetyczna gwarantuje, że większe kafelki w usłudze Azure Maps przedstawiają taki sam obszar mapy jak w usłudze Google Maps.

Wcześniej: Mapy Google

Przenieś kontrolkę Map Google przy pomocy metody setOptions. Ta metoda umożliwia określenie środka mapy i poziomu powiększenia.

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(35.0272, -111.0225),
    zoom: 15
});

Ustawienie widoku w Mapach Google

Po: Azure Maps

W usłudze Azure Maps zmień położenie mapy przy użyciu setCamera metody i zmień styl mapy przy użyciu setStyle metody . Współrzędne w usłudze Azure Maps są w formacie "długość geograficzna, szerokość geograficzna", a wartość poziomu powiększenia jest odejmowana przez jeden.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite'
});

Więcej zasobów:

Dodawanie znacznika

W Azure Maps istnieje wiele sposobów renderowania danych punktowych na mapie.

Znaczniki HTML — renderuje punkty przy użyciu tradycyjnych elementów DOM. Znaczniki HTML obsługują przeciąganie.
Warstwa symboli — renderuje punkty z ikoną lub tekstem w kontekście WebGL.
Warstwa bąbelkowa — renderuje punkty jako okręgi na mapie. Promienie okręgów można skalować na podstawie właściwości danych.

Renderowanie warstw symboli i warstw bąbelkowych w kontekście WebGL. Obie warstwy mogą renderować duże zestawy punktów na mapie. Te warstwy wymagają przechowywania danych w źródle danych. Źródła danych i warstwy renderowania powinny zostać dodane do mapy po uruchomieniu ready zdarzenia. Znaczniki HTML są renderowane jako elementy DOM na stronie i nie używają źródła danych. Większa liczba elementów DOM na stronie, tym wolniej staje się strona. Jeśli renderowanie mapy obejmuje więcej niż kilkaset punktów, zaleca się użycie jednej z dostępnych warstw renderowania.

Dodajmy znacznik do mapy z numerem 10 nakładanym jako etykieta. Użyj długości geograficznej: -0,2 i szerokości geograficznej: 51,5.

Wcześniej: Mapy Google

W usłudze Mapy Google dodaj znaczniki do mapy przy użyciu google.maps.Marker klasy i określ mapę jako jedną z opcji.

//Create a marker and add it to the map.
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    label: '10',
    map: map
});

Znacznik Mapy Google

Po: Usługa Azure Maps przy użyciu znaczników HTML

W usłudze Azure Maps użyj znaczników HTML, aby wyświetlić punkt na mapie. Znaczniki HTML są zalecane w przypadku aplikacji, które muszą wyświetlać tylko kilka punktów na mapie. Aby użyć znacznika HTML, utwórz wystąpienie atlas.HtmlMarker klasy. Ustaw opcje tekstu i położenia, a następnie dodaj znacznik do mapy przy użyciu map.markers.add metody .

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Po: Azure Maps z użyciem warstwy symboli

W przypadku warstwy Symbol dodaj dane do źródła danych. Dołącz źródło danych do warstwy. Ponadto należy dodać źródło danych i warstwę do mapy po uruchomieniu ready zdarzenia. Aby renderować unikatową wartość tekstową powyżej symbolu, informacje tekstowe muszą być przechowywane jako właściwość punktu danych. Właściwość textField musi być przywołana w opcji warstwy. Takie podejście jest nieco bardziej pracowite niż używanie znaczników HTML, ale zapewnia lepszą wydajność.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Dodawanie znacznika niestandardowego

Możesz użyć obrazów niestandardowych do reprezentowania punktów na mapie. Poniższa mapa używa obrazu niestandardowego do wyświetlania punktu na mapie. Punkt znajduje się na szerokości geograficznej 51,5 i długości geograficznej -0,2. Kotwica przesuwa położenie znacznika, tak aby punkt ikony pushpin był wyrównany do prawidłowego położenia na mapie.

żółty obraz pushpin
yellow-pushpin.png

Wcześniej: Mapy Google

Utwórz znacznik niestandardowy, określając Icon obiekt zawierający url odniesienie do obrazu. anchor Określ punkt w celu wyrównania punktu obrazu pushpin ze współrzędną na mapie. Wartość punktu kotwiczenia w usłudze Google Maps jest określana względem lewego górnego rogu obrazu.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    icon: {
        url: 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png',
        anchor: new google.maps.Point(5, 30)
    },
    map: map
});

Znacznik niestandardowy usługi Google Maps

Po: Usługa Azure Maps przy użyciu znaczników HTML

Aby dostosować znacznik HTML, przekaż kod HTML string lub HTMLElement do opcji znacznika htmlContent. anchor Użyj opcji , aby określić względną pozycję znacznika względem współrzędnej położenia. Przypisz jeden z dziewięciu zdefiniowanych punktów odniesienia do anchor opcji. Zdefiniowane punkty to: "środek", "góra", "dół", "lewo", "prawo", "górny lewy", "górny prawy", "dolny lewy", "dolny prawy". Zawartość jest domyślnie zakotwiczona w dolnej części zawartości HTML. Aby ułatwić migrację kodu z Google Maps, ustaw anchor na "w lewym górnym rogu", a następnie użyj opcji pixelOffset z takim samym przesunięciem jak w Google Maps. Przesunięcia w usłudze Azure Maps zachodzą w przeciwnym kierunku niż w Google Maps. A więc pomnożyć przesunięcia przez minus jeden.

Napiwek

Dodaj pointer-events:none jako styl zawartości HTML, aby wyłączyć domyślne zachowanie przeciągania w przeglądarce Microsoft Edge, co spowoduje wyświetlenie niechcianej ikony.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="https://samples.azuremaps.com/images/icons/ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Po: Azure Maps z użyciem warstwy symboli

Warstwy symboli w usłudze Azure Maps obsługują również obrazy niestandardowe. Najpierw załaduj obraz do zasobów mapy i przypisz go za pomocą unikatowego identyfikatora. Odwołuj się do obrazu w warstwie symboli. offset Użyj opcji , aby wyrównać obraz do poprawnego punktu na mapie. anchor Użyj opcji , aby określić względną pozycję symbolu względem współrzędnych położenia. Użyj jednego z dziewięciu zdefiniowanych punktów odniesienia. Punkty te to: "środek", "góra", "dolna", "lewa", "prawa", "lewa górna", "prawa górna", "lewa dolna", "dolna prawa". Zawartość jest domyślnie zakotwiczona w dolnej części zawartości HTML. Aby ułatwić migrację kodu z Google Maps, ustaw anchor na "w lewym górnym rogu", a następnie użyj opcji offset z takim samym przesunięciem jak w Google Maps. Przesunięcia w usłudze Azure Maps zachodzą w przeciwnym kierunku niż w Google Maps. A więc pomnożyć przesunięcia przez minus jeden.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png').then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Napiwek

Aby renderować zaawansowane punkty niestandardowe, użyj wielu nałożonych na siebie warstw renderowania. Załóżmy na przykład, że chcesz mieć wiele pinezek, które mają tę samą ikonę na różnokolorowych okręgach. Zamiast tworzyć kilka obrazów dla każdej nakładki kolorów, dodaj warstwę symboli na górze warstwy bąbelkowej. Odwołuj się do tego samego źródła danych. Takie podejście będzie bardziej wydajne niż tworzenie i utrzymywanie wielu różnych obrazów.

Więcej zasobów:

Dodawanie wielolinii

Użyj wielolinii, aby reprezentować linię lub ścieżkę na mapie. Utwórzmy wielolinię przerywaną na mapie.

Wcześniej: Mapy Google

Klasa Polyline akceptuje zestaw opcji. Przekaż tablicę współrzędnych w opcji path wielolinii.

//Get the center of the map.
var center = map.getCenter();

//Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

//Create the polyline.
var line = new google.maps.Polyline({
    path: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1)
    ],
    strokeColor: 'red',
    strokeOpacity: 0,
    strokeWeight: 4,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
    }]
});

//Add the polyline to the map.
line.setMap(map);

Wieloliniowa mapa Google

Po: Azure Maps

Linie wielokątne są nazywane obiektami LineString lub MultiLineString. Te obiekty można dodać do źródła danych i renderować przy użyciu warstwy liniowej. Dodaj LineString do źródła danych, a następnie dodaj źródło danych do LineLayer, aby je renderować.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Więcej zasobów:

Dodawanie wielokąta

Usługi Azure Maps i Google Maps zapewniają podobną obsługę wielokątów. Wielokąty są używane do reprezentowania obszaru na mapie. W poniższych przykładach pokazano, jak utworzyć wielokąt, który tworzy trójkąt na podstawie współrzędnej środkowej mapy.

Wcześniej: Mapy Google

Klasa Wielokąt akceptuje zestaw opcji. Przekaż tablicę współrzędnych do paths opcji wielokąta.

//Get the center of the map.
var center = map.getCenter();

//Create a polygon.
var polygon = new google.maps.Polygon({
    paths: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1),
        center
    ],
    strokeColor: 'red',
    strokeWeight: 2,
    fillColor: 'rgba(0, 255, 0, 0.5)'
});

//Add the polygon to the map
polygon.setMap(map);

Wielokąt Mapy Google

Po: Azure Maps

Dodaj obiekt Polygon lub MultiPolygon do źródła danych. Renderuj obiekt na mapie przy użyciu warstw. Renderowanie obszaru wielokąta przy użyciu warstwy wielokąta. I renderuj kontur wielokąta przy użyciu warstwy liniowej.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Więcej zasobów:

Wyświetlanie okna informacji

Dodatkowe informacje dotyczące jednostki można wyświetlić na mapie jako klasę google.maps.InfoWindow w usłudze Google Maps. W usłudze Azure Maps tę funkcję można osiągnąć przy użyciu atlas.Popup klasy . Następne przykłady dodają znacznik do mapy. Po kliknięciu znacznika zostanie wyświetlone okno informacji lub wyskakujące okienko.

Wcześniej: Mapy Google

Utwórz egzemplarz okna informacji przy użyciu konstruktora google.maps.InfoWindow.

<!-- Google Maps Script Reference -->
<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>

<script type='text/javascript'>

    async function initMap() {
        // Request needed libraries.
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker",);

        const map = new Map(document.getElementById("myMap"), {
            zoom: 12,
            center: { lat: 47.608458, lng: -122.335077 },
            disableDefaultUI: true,
            mapId: "4504f8b37365c3d0",
        });

        // Create an info window to share between markers.
        const infoWindow = new InfoWindow();

        // Create the marker.
        const pin = new PinElement();
        const marker = new AdvancedMarkerElement({
            position: { lat: 47.608458, lng: -122.335077 },
            map,
            title: "<B>Hello World!</B>",
            content: pin.element,
            gmpClickable: true,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener("click", ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    }
</script>

Google Maps — wyskakujące okienko

Po: Azure Maps

Użyjmy wyskakującego okienka, aby wyświetlić dodatkowe informacje o lokalizacji. Przekaż kod HTML string lub HTMLElement obiekt do content opcji wyskakującego okienka. Jeśli chcesz, wyskakujące okienka mogą być wyświetlane niezależnie od dowolnego kształtu. W związku z tym, aby wyskakujące okienka działały poprawnie, należy określić wartość position. position Określ wartość. Aby wyświetlić wyskakujące okienko, wywołaj metodę open i przekaż map, na którym ma być wyświetlane to okienko.

//Add a marker to the map in which to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:5px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Uwaga

Możesz zrobić to samo z warstwą symbolu, warstwą bąbelkową, linią lub warstwą z wielokątem, przekazując wybraną warstwę do kodu zdarzeń na mapie zamiast do znacznika.

Więcej zasobów:

Importowanie pliku GeoJSON

Usługa Google Maps obsługuje ładowanie i dynamiczne stylizowanie danych GeoJSON za pośrednictwem google.maps.Data klasy . Funkcjonalność tej klasy jest bardziej zgodna ze stylem opartym na danych w usłudze Azure Maps. Ale istnieje kluczowa różnica. Za pomocą usługi Google Maps można określić funkcję wywołania zwrotnego. Logika biznesowa stylizowania każdej funkcji, którą przetwarza indywidualnie w wątku interfejsu użytkownika. Jednak w usłudze Azure Maps warstwy obsługują określanie wyrażeń opartych na danych jako opcji stylów. Te wyrażenia są przetwarzane w czasie renderowania w osobnym wątku. Podejście usługi Azure Maps zwiększa wydajność renderowania. Ta zaleta jest zauważana, gdy większe zestawy danych muszą być szybko renderowane.

Poniższe przykłady ładują źródło danych GeoJSON wszystkich trzęsień ziemi w ciągu ostatnich siedmiu dni od USGS. Dane trzęsień ziemi są renderowane jako skalowane okręgi na mapie. Kolor i skala każdego okręgu zależą od magnitudy każdego trzęsienia ziemi, która jest przechowywana we "mag" właściwości każdego elementu w zestawie danych. Jeśli wielkość jest większa lub równa pięciu, okrąg jest czerwony. Jeśli jest większa lub równa trzy, ale mniejsza niż pięć, okrąg jest pomarańczowy. Jeśli jest to mniej niż trzy, okrąg jest zielony. Promień każdego okręgu jest wykładnikiem wielkości pomnożonej przez 0,1.

Wcześniej: Mapy Google

Określ pojedynczą funkcję wywołania zwrotnego w metodzie map.data.setStyle . Wewnątrz funkcji wywołania zwrotnego zastosuj logikę biznesową do każdej funkcji. Załaduj źródło danych GeoJSON za pomocą map.data.loadGeoJson metody .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2
            });

            //Define a callback to style each feature.
            map.data.setStyle(function (feature) {

                //Extract the 'mag' property from the feature.
                var mag = parseFloat(feature.getProperty('mag'));

                //Set the color value to 'green' by default.
                var color = 'green';

                //If the mag value is greater than 5, set the color to 'red'.
                if (mag >= 5) {
                    color = 'red';
                }
                //If the mag value is greater than 3, set the color to 'orange'.
                else if (mag >= 3) {
                    color = 'orange';
                }

                return /** @type {google.maps.Data.StyleOptions} */({
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,

                        //Scale the radius based on an exponential of the 'mag' value.
                        scale: Math.exp(mag) * 0.1,
                        fillColor: color,
                        fillOpacity: 0.75,
                        strokeWeight: 2,
                        strokeColor: 'white'
                    }
                });
            });

            //Load the data feed.
            map.data.loadGeoJson(earthquakeFeed);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

GeoJSON w Mapach Google

Po: Azure Maps

GeoJSON to podstawowy typ danych w usłudze Azure Maps. Zaimportuj go do źródła danych przy użyciu datasource.importFromUrl metody . Użyj warstwy bąbelkowej. Warstwa bąbelkowa udostępnia funkcje renderowania skalowanych okręgów na podstawie właściwości funkcji w źródle danych. Zamiast mieć funkcję wywołania zwrotnego, logika biznesowa jest konwertowana na wyrażenie i przekazywana do opcji stylu. Wyrażenia definiują sposób działania logiki biznesowej. Wyrażenia mogą być przekazywane do innego wątku i oceniane względem danych funkcji. Do usługi Azure Maps można dodać wiele źródeł danych i warstw, z których każda ma inną logikę biznesową. Ta funkcja umożliwia renderowanie wielu zestawów danych na mapie na różne sposoby.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as scaled circles.
                map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
                    //Make the circles semi-transparent.
                    opacity: 0.75,

                    color: [
                        'case',

                        //If the mag value is greater than 5, return 'red'.
                        ['>=', ['get', 'mag'], 5],
                        'red',

                        //If the mag value is greater than 3, return 'orange'.
                        ['>=', ['get', 'mag'], 3],
                        'orange',

                        //Return 'green' as a fallback.
                        'green'
                    ],

                    //Scale the radius based on an exponential of the 'mag' value.
                    radius: ['*', ['^', ['e'], ['get', 'mag']], 0.1]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Klastrowanie znaczników

Gdy na mapie pojawia się wiele punktów danych, punkty mogą się nakładać, co sprawia, że mapa będzie zaśmiecona i trudna do odczytania i użycia. Dane punktu klastrowania to proces łączenia punktów danych, które znajdują się blisko siebie i przedstawiania ich na mapie jako pojedynczego klastrowanego punktu danych. Gdy użytkownik powiększa mapę, klastry dzielą się na poszczególne punkty danych. Grupowanie punktów danych poprawia doświadczenie użytkownika i wydajność mapy.

W poniższych przykładach kod ładuje dane trzęsień ziemi w formacie GeoJSON z ostatniego tygodnia i dodaje je do mapy. Klastry są renderowane jako skalowane i kolorowe okręgi. Skala i kolor okręgów zależy od liczby punktów, które zawierają.

Uwaga

Usługi Google Maps i Azure Maps używają nieco innych algorytmów klastrowania. W związku z tym czasami rozkład punktów w klastrach różni się.

Wcześniej: Mapy Google

Użyj biblioteki MarkerCluster do grupowania znaczników. Ikony klastra są ograniczone do obrazów, które mają liczby od jednej do pięciu jako ich nazwy. Są one hostowane w tym samym katalogu.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        async function initMap() {
            const AdvancedMarkerElement = await google.maps.importLibrary("marker");
            const map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
            });

            //Download the GeoJSON data.
            fetch(earthquakeFeed)
                .then(function (response) {
                    return response.json();
                }).then(function (data) {

                    //Loop through the GeoJSON data and create a marker for each data point.
                    var markers = [];
                    for (var i = 0; i < data.features.length; i++) {
                        markers.push(new google.maps.marker.AdvancedMarkerElement({
                            position: new google.maps.LatLng(data.features[i].geometry.coordinates[1], data.features[i].geometry.coordinates[0])
                        }));
                    }

                    //Create a marker clusterer instance and tell it where to find the cluster icons.
                    var markerCluster = new markerClusterer.MarkerClusterer({map, markers});
                });
        }
    </script>

    <!-- Load the marker cluster library. -->
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Klasteryzacja Google Maps

Po: Azure Maps

Dodawanie danych i zarządzanie nimi w źródle danych. Połącz źródła danych i warstwy, a następnie renderuj dane. Klasa DataSource w usłudze Azure Maps udostępnia kilka opcji klastrowania.

cluster — nakazuje źródłu danych grupować dane punktowe.
clusterRadius - Promień w pikselach do grupowania punktów razem.
clusterMaxZoom - Maksymalny poziom powiększenia, w którym występuje klastrowanie. Jeśli powiększasz więcej niż ten poziom, wszystkie punkty są renderowane jako symbole.
clusterProperties — Definiuje właściwości niestandardowe, które są obliczane przy użyciu wyrażeń dla wszystkich punktów w każdym klastrze i dodawane do właściwości każdego punktu klastra.

Po włączeniu klastrowania źródło danych wysyła klastrowane i nieklastrowane punkty danych do warstw na potrzeby renderowania. Źródło danych może klasterować setki tysięcy punktów danych. Punkt danych klastrowanych ma następujące właściwości:

Nazwa właściwości	Typ	Opis
`cluster`	typ logiczny (boolowski)	Wskazuje, czy funkcja reprezentuje klaster.
`cluster_id`	sznurek	Unikatowy identyfikator klastra, który może być używany z metodami DataSource `getClusterExpansionZoom`, `getClusterChildren`i `getClusterLeaves` .
`point_count`	Liczba	Liczba punktów, które zawiera klaster.
`point_count_abbreviated`	sznurek	Ciąg, który skraca wartość `point_count`, jeśli jest długa. (na przykład 4000 staje się 4K)

Klasa DataSource ma następującą funkcję pomocnika służącą do uzyskiwania dostępu do dodatkowych informacji o klastrze przy użyciu klasy cluster_id.

Metoda	Typ zwracany	Opis
`getClusterChildren(clusterId: number)`	Promise<Array<Feature< Geometry, cokolwiek> \| Kształt>>	Pobiera dzieci danego klastra na następnym poziomie zoomu. Te dzieci mogą być kombinacją kształtów i podklastrów. Subclusters to funkcje z właściwościami zgodnymi z właściwościami ClusteredProperties.
`getClusterExpansionZoom(clusterId: number)`	Numer obietnicy<>	Oblicza poziom powiększenia, na którym klaster zaczyna się rozszerzać lub rozbijać.
`getClusterLeaves(clusterId: number, limit: number, offset: number)`	Promise<Array<Feature< Geometry, cokolwiek> \| Kształt>>	Pobiera wszystkie punkty w klastrze. Ustaw wartość , `limit` aby zwrócić podzbiór punktów, i użyj elementu `offset` , aby przestronicować punkty.

Podczas renderowania danych klastrowanych na mapie często najlepiej używać co najmniej dwóch warstw. W poniższym przykładzie użyto trzech warstw. Warstwa bąbelków do rysowania skalowanych, kolorowych okręgów na podstawie wielkości klastrów. Warstwa symboli do wyświetlania rozmiaru klastra jako tekstu. Używa ona drugiej warstwy symboli do renderowania punktów nieklastrowanych. Aby uzyskać więcej informacji na temat innych sposobów renderowania danych klastrowanych, zobacz Clustering point data in the Web SDK (Dane punktów klastrowania w zestawie SDK sieci Web).

Bezpośrednio zaimportuj dane GeoJSON przy użyciu funkcji importDataFromUrl w klasie DataSource na mapie Azure Maps.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points in the cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Dodawanie mapy cieplnej

Mapy cieplne, nazywane również mapami gęstości punktów, są typem wizualizacji danych. Są one używane do reprezentowania gęstości danych przy użyciu zakresu kolorów. Często są one używane do wyświetlania danych "hot spotów" na mapie. Mapy cieplne to doskonały sposób renderowania dużych zestawów danych punktów.

Poniższe przykłady ładują źródło danych GeoJSON wszystkich trzęsień ziemi w ciągu ostatniego miesiąca, z USGS i renderuje je jako mapę cieplną ważoną. Właściwość "mag" jest używana jako waga.

Wcześniej: Mapy Google

Aby utworzyć mapę cieplną, załaduj bibliotekę "wizualizacji", dodając &libraries=visualization do adresu URL skryptu interfejsu programowania aplikacji. Warstwa mapy cieplnej w usłudze Google Maps nie obsługuje bezpośrednio danych GeoJSON. Najpierw pobierz dane i przekonwertuj je na tablicę ważonych punktów danych:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {

            var map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapTypeId: 'satellite'
            });

            //Download the GeoJSON data.
            fetch(url).then(function (response) {
                return response.json();
            }).then(function (res) {
                var points = getDataPoints(res);

                var heatmap = new google.maps.visualization.HeatmapLayer({
                    data: points
                });
                heatmap.setMap(map);
            });
        }

        function getDataPoints(geojson, weightProp) {
            var points = [];

            for (var i = 0; i < geojson.features.length; i++) {
                var f = geojson.features[i];

                if (f.geometry.type === 'Point') {
                    points.push({
                        location: new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]),
                        weight: f.properties[weightProp]
                    });
                }
            }

            return points;
        } 
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&libraries=visualization" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Mapa cieplna Mapy Google

Po: Azure Maps

Załaduj dane GeoJSON do źródła danych i połącz źródło danych z warstwą mapy cieplnej. Właściwość, która jest używana dla wagi, można przekazać do weight opcji przy użyciu wyrażenia. Bezpośrednie importowanie danych GeoJSON do usługi Azure Maps przy użyciu importDataFromUrl funkcji w DataSource klasie .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    weight: ['get', 'mag'],
                    intensity: 0.005,
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Nakładanie warstwy kafelkowej

Warstwy kafelków w usłudze Azure Maps są nazywane nakładkami obrazów w usłudze Google Maps. Warstwy płytek umożliwiają nakładanie dużych obrazów podzielonych na mniejsze obrazy kafelków, które są zgodne z systemem kafelkowania map. Takie podejście jest często używane do nakładania dużych obrazów lub dużych zestawów danych.

Poniższe przykłady nakładają warstwę kafelka radaru pogody z Iowa Environmental Mesonet z Iowa State University.

Wcześniej: Mapy Google

W usłudze Google Maps warstwy kafelków można tworzyć przy użyciu google.maps.ImageMapType klasy .

map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + coord.x + "/" + coord.y;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.8
}));

Warstwa kafelka Usługi Google Maps

Po: Azure Maps

Dodaj warstwę kafelka do mapy podobnie jak każda inna warstwa. Użyj sformatowanego adresu URL, który ma symbole zastępcze x, y, zoom; {x}, {y}, {z} aby wskazać warstwie, jak uzyskać dostęp do kafelków. Warstwy kafelków usługi Azure Maps obsługują symbole zastępcze {quadkey}, {bbox-epsg-3857} i {subdomain}.

Napiwek

W Azure Maps warstwy można łatwo renderować pod innymi, w tym pod warstwami mapy podstawowej. Często pożądane jest renderowanie warstw kafelków poniżej etykiet mapy, aby były łatwe do odczytania. Metoda map.layers.add przyjmuje drugi parametr, który jest identyfikatorem warstwy, w której należy wstawić nową warstwę poniżej. Aby wstawić warstwę kafelka poniżej etykiet mapy, użyj następującego kodu: map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Napiwek

Żądania kafelków można przechwycić, korzystając z opcji transformRequest dostępnej w mapie. Umożliwi to modyfikowanie lub dodawanie nagłówków do żądania w razie potrzeby.

Więcej zasobów:

Wyświetlanie danych o ruchu

Dane ruchu mogą być nakładane zarówno na Azure, jak i na Google Maps.

Wcześniej: Mapy Google

Nakładanie danych ruchu na mapie przy użyciu warstwy ruchu.

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Ruch w usłudze Google Maps

Po: Azure Maps

Usługa Azure Maps oferuje kilka różnych opcji wyświetlania ruchu. Wyświetlaj zdarzenia ruchu drogowego, takie jak zamknięcia dróg i wypadki, jako ikony na mapie. Nakładaj przepływ ruchu i kolorystyczne oznaczenia dróg na mapie. Kolory można modyfikować na podstawie limitu prędkości zaksięgowanej, w stosunku do normalnego oczekiwanego opóźnienia lub bezwzględnego opóźnienia. Dane zdarzeń w usłudze Azure Maps są aktualizowane co minutę, a dane przepływu są aktualizowane co dwie minuty.

Przypisz żądane wartości dla setTraffic opcji.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Jeśli wybierzesz jedną z ikon ruchu w usłudze Azure Maps, więcej informacji zostanie wyświetlonych w oknie podręcznym.

Więcej zasobów:

Dodaj nakładkę naziemną

Azure i Google Maps obsługują nakładanie georeferencjonowanych obrazów na mapie. Georeferencyjne obrazy przenoszą się i skalują się podczas przesuwania i powiększania mapy. W usłudze Google Maps obrazy georeferencyjne są znane jako nakładki naziemne, podczas gdy w usłudze Azure Maps są nazywane warstwami obrazów. Doskonale nadają się do budowy planów pomieszczeń, układania starych map lub obrazów z drona.

Wcześniej: Mapy Google

Określ adres URL do obrazu, który ma zostać nałożony, oraz ramkę ograniczającą, aby umieścić obraz na mapie. Ten przykład nakłada obraz mapy Newark New Jersey z 1922 roku na mapę.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.740, -74.18),
                zoom: 12
            });

            var imageBounds = {
                north: 40.773941,
                south: 40.712216,
                east: -74.12544,
                west: -74.22655
            };

            historicalOverlay = new google.maps.GroundOverlay(
                'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
                imageBounds);
            historicalOverlay.setMap(map);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Uruchomienie tego kodu w przeglądarce wyświetla mapę, która wygląda jak na poniższej ilustracji:

Nakładka obrazu usługi Google Maps

Po: Azure Maps

atlas.layer.ImageLayer Użyj klasy , aby nakładać obrazy georeferencyjne. Ta klasa wymaga adresu URL obrazu i zestawu współrzędnych dla czterech narożników obrazu. Obraz musi być hostowany w tej samej domenie lub musi mieć włączone CORS.

Napiwek

Jeśli masz tylko informacje o północy, południu, wschodzie, zachodzie i rotacji i nie masz współrzędnych dla każdego rogu obrazu, możesz użyć metody statycznej atlas.layer.ImageLayer.getCoordinatesFromEdges .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Dodawanie danych KML do mapy

Zarówno platforma Azure, jak i usługi Google Maps mogą importować i renderować dane KML, KMZ i GeoRSS na mapie. Usługa Azure Maps obsługuje również gpX, GML, pliki przestrzenne CSV, GeoJSON, dobrze znany tekst (WKT), usługi mapowania sieci Web (WMS), usługi kafelków mapowania sieci Web (WMTS) i usługi funkcji sieci Web (WFS). Usługa Azure Maps odczytuje pliki lokalnie do pamięci i w większości przypadków może obsługiwać większe pliki KML.

Wcześniej: Mapy Google

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(0, 0),
                zoom: 1
            });

             var layer = new google.maps.KmlLayer({
              url: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',
              map: map
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Uruchomienie tego kodu w przeglądarce wyświetla mapę, która wygląda jak na poniższej ilustracji:

Mapy Google KML

Po: Azure Maps

W Azure Maps, GeoJSON jest głównym formatem danych używanym w Web SDK, inne formaty danych przestrzennych mogą być łatwo zintegrowane za pomocą modułu spatial IO. Ten moduł zawiera funkcje zarówno do odczytywania i zapisywania danych przestrzennych, jak i zawiera prostą warstwę danych, która może łatwo renderować dane z dowolnego z tych formatów danych przestrzennych. Aby odczytać dane w pliku danych przestrzennych, przekaż adres URL lub nieprzetworzone dane jako ciąg lub obiekt blob do funkcji atlas.io.read. Spowoduje to zwrócenie wszystkich analizowanych danych z pliku, które można następnie dodać do mapy. Rozwiązanie KML jest nieco bardziej złożone niż większość formatów danych przestrzennych, ponieważ zawiera o wiele więcej informacji o stylu. Klasa SpatialDataLayer obsługuje większość tych stylów, jednak obrazy ikon muszą zostać załadowane do mapy przed załadowaniem danych funkcji, a nakładki naziemne muszą zostać dodane jako warstwy do mapy oddzielnie. Podczas ładowania danych za pośrednictwem adresu URL, powinien być hostowany w punkcie końcowym z włączoną obsługą CORS lub usługa proxy powinna zostać przekazana jako opcja do funkcji odczytu.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
            
                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Więcej zasobów:

Więcej przykładów kodu

Poniżej przedstawiono kilka przykładów kodu związanych z migracją map Google:

Usługi:

Mapowanie klas z Google Maps V3 na Azure Maps Web SDK

Poniższy dodatek zawiera odwołanie krzyżowe do powszechnie używanych klas w usłudze Google Maps w wersji 3 i równoważnego zestawu SDK sieci Web usługi Azure Maps.

Podstawowe klasy

Mapy Google	Azure Maps
`google.maps.Map`	atlas. Mapa
`google.maps.InfoWindow`	atlas. Popup
`google.maps.InfoWindowOptions`	atlas. Menu podręczneOpcje
`google.maps.LatLng`	atlas.data.Position
`google.maps.LatLngBounds`	atlas.data.BoundingBox
`google.maps.MapOptions`	atlas.OpcjeKamery atlas. CameraBoundsOptions atlas. ServiceOptions atlas.OpcjeStylu atlas. UserInteractionOptions
`google.maps.Point`	atlas. Piksel

Klasy nakładki

Mapy Google	Azure Maps
`google.maps.Marker`	atlas. HtmlMarker atlas.data.Point
`google.maps.MarkerOptions`	atlas. HtmlMarkerOptions atlas.layer.SymbolLayer atlas. SymbolLayerOptions atlas.OpcjeIkony atlas. Opcje tekstu atlas.layer.BubbleLayer atlas. BubbleLayerOptions
`google.maps.Polygon`	atlas.data.Polygon
`google.maps.PolygonOptions`	atlas.layer.PolygonLayer atlas. PolygonLayerOptions atlas.layer.LineLayer atlas. LineLayerOptions
`google.maps.Polyline`	atlas.data.LineString
`google.maps.PolylineOptions`	atlas.layer.LineLayer atlas. LineLayerOptions
`google.maps.Circle`	Zobacz Dodawanie okręgu do mapy
`google.maps.ImageMapType`	atlas. Warstwa kafelków
`google.maps.ImageMapTypeOptions`	atlas. TileLayerOptions (Opcje warstwy kafelków)
`google.maps.GroundOverlay`	atlas.layer.ImageLayer atlas. ImageLayerOptions

Klasy usług

Zestaw SDK sieci Web usługi Azure Maps zawiera moduł usług, który można załadować oddzielnie. Ten moduł opakowuje usługi REST Azure Maps za pomocą interfejsu API sieciowego i może być używany w aplikacjach JavaScript, TypeScript i Node.js.

Mapy Google	Azure Maps
`google.maps.Geocoder`	atlas.service.SearchUrl (adres url wyszukiwania)
`google.maps.GeocoderRequest`	atlas. SearchAddressOptions (Opcje Wyszukiwania) [atlas. SearchAddressReverseOptions] atlas. SearchAddressReverseCrossStreetOptions (Opcje wyszukiwaniaAdresReverseCrossStreet) atlas. SearchAddressStructuredOptions (Opcje Wyszukiwania) atlas. SearchAlongRouteOptions atlas. Opcje wyszukiwaniaFuzzyOptions atlas. SearchInsideGeometryOptions (SzukajWewnątrzGeometryOptions) atlas. SzukajW pobliżuOpcje atlas. SearchPOIOptions atlas. SearchPOICategoryOptions
`google.maps.DirectionsService`	atlas.service.RouteUrl (adres url trasy)
`google.maps.DirectionsRequest`	atlas. CalculateRouteDirectionsOptions
`google.maps.places.PlacesService`	f

Biblioteki

Biblioteki dodają więcej funkcji do mapy. Wiele z tych bibliotek jest w podstawowym zestawie SDK usługi Azure Maps. Oto kilka równoważnych klas do użycia zamiast tych bibliotek Google Maps

Mapy Google	Azure Maps
Biblioteka rysunków	Moduł narzędzi do rysowania
Biblioteka geometrii	atlas.math (biblioteka atlas)
Biblioteka wizualizacji	Warstwa mapy cieplnej

Czyszczenie zasobów

Brak zasobów do wyczyszczenia.

Następne kroki

Dowiedz się więcej o migracji do usługi Azure Maps:

Migrowanie usługi internetowej

Udostępnij za pośrednictwem

Samouczek: migrowanie aplikacji internetowej z usługi Google Maps

Wymagania wstępne

Obsługa kluczowych funkcji

Znaczące różnice w Web SDKs

Przykłady Web SDK zestawione obok siebie

Ładowanie mapy

Wcześniej: Mapy Google

Po: Azure Maps

Lokalizowanie mapy

Wcześniej: Mapy Google

Po: Azure Maps

Ustawianie widoku mapy

Wcześniej: Mapy Google

Po: Azure Maps

Dodawanie znacznika

Wcześniej: Mapy Google

Dodawanie znacznika niestandardowego

Wcześniej: Mapy Google

Dodawanie wielolinii

Wcześniej: Mapy Google

Po: Azure Maps

Dodawanie wielokąta

Wcześniej: Mapy Google

Po: Azure Maps

Wyświetlanie okna informacji

Wcześniej: Mapy Google

Po: Azure Maps

Importowanie pliku GeoJSON

Wcześniej: Mapy Google

Po: Azure Maps

Klastrowanie znaczników

Wcześniej: Mapy Google

Po: Azure Maps

Dodawanie mapy cieplnej

Wcześniej: Mapy Google

Po: Azure Maps

Nakładanie warstwy kafelkowej

Wcześniej: Mapy Google

Po: Azure Maps

Wyświetlanie danych o ruchu

Wcześniej: Mapy Google

Po: Azure Maps

Dodaj nakładkę naziemną

Wcześniej: Mapy Google

Po: Azure Maps

Dodawanie danych KML do mapy

Wcześniej: Mapy Google

Po: Azure Maps

Więcej przykładów kodu

Mapowanie klas z Google Maps V3 na Azure Maps Web SDK

Podstawowe klasy

Klasy nakładki

Klasy usług

Biblioteki

Czyszczenie zasobów

Następne kroki

Opinia

Dodatkowe zasoby