Öğretici: Azure haritalar 'ı kullanarak yakındaki ilgi noktalarını aramaTutorial: Search nearby points of interest using Azure Maps

Bu öğreticide, Azure Haritalar hesabı ayarlama ve sonra Haritalar API’lerini kullanarak ilgi çekici bir noktayı arama işlemleri gösterilmektedir.This tutorial shows how to set up an account with Azure Maps, then use the Maps APIs to search for a point of interest. Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:In this tutorial, you learn how to:

  • Azure Haritalar hesabı oluşturmaCreate an Azure Maps account
  • Haritalar hesabınızın birincil anahtarını almaRetrieve the primary key for your Maps account
  • Harita denetimi API’sini kullanarak yeni bir web sayfası oluşturmaCreate a new web page using the map control API
  • Haritalar arama hizmetini kullanarak yakınlardaki bir ilgi çekici noktayı bulmaUse the Maps search service to find a nearby point of interest

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.If you don't have an Azure subscription, create a free account before you begin.

Azure portalında oturum açınSign in to the Azure portal

Azure portalında oturum açın.Sign in to the Azure portal.

Azure Maps hesabı oluşturmaCreate an account with Azure Maps

Aşağıdaki adımları uygulayarak yeni bir Haritalar hesabı oluşturun:Create a new Maps account with the following steps:

  1. Azure portalının sol üst köşesinde bulunan Kaynak oluştur öğesine tıklayın.In the upper left-hand corner of the Azure portal, click Create a resource.
  2. Market’te Ara kutusuna Haritalar yazın.In the Search the Marketplace box, type Maps.
  3. Sonuçlar içinden Haritalar’ı seçin.From the Results, select Maps. Haritanın altında görüntülenen Oluştur düğmesine tıklayın.Click Create button that appears below the map.
  4. Haritalar Hesabı Oluştur sayfasında aşağıdaki değerleri girin:On the Create Maps Account page, enter the following values:
    • Bu hesap için kullanmak istediğiniz Abonelik.The Subscription that you want to use for this account.
    • Bu hesap için Kaynak grubu adı.The Resource group name for this account. Kaynak grubu için Yeni oluştur veya Mevcut olanı kullan seçeneğini belirleyebilirsiniz.You may choose to Create new or Use existing resource group.
    • Yeni hesabınıza verilen Ad.The Name of your new account.
    • Bu hesabın fiyatlandırma katmanı .The Pricing tier for this account.
    • Lisans’ı ve Gizlilik Bildirimi’ni okuyun ve onay kutusunu işaretleyerek koşulları kabul edin.Read the License and Privacy Statement, and check the checkbox to accept the terms.
    • Oluştur düğmesine tıklayın.Click the Create button.

Portalda Haritalar hesabı oluşturma

Hesabınızın birincil anahtarını almaGet the primary key for your account

Haritalar hesabınız başarıyla oluşturulduktan sonra, Haritalar API’lerini sorgulamanıza olanak sağlayan anahtarı alın.Once your Maps account is successfully created, retrieve the key that enables you to query the Maps APIs.

  1. Portalda Haritalar hesabınızı açın.Open your Maps account in the portal.
  2. Ayarlar bölümünde kimlik doğrulaması' nı seçin.In the settings section, select Authentication.
  3. Birincil Anahtar’ı panonuza kopyalayın.Copy the Primary Key to your clipboard. Bu öğreticinin ilerleyen kısmında kullanmak üzere bunu yerel olarak kaydedin.Save it locally to use later in this tutorial.

Portalda Birincil Anahtar’ı alma

Yeni harita oluşturmaCreate a new map

Harita Denetimi API’si, Haritalar’ı web uygulamanızla kolayca tümleştirmenize olanak tanıyan kullanışlı bir istemci kitaplığıdır.The Map Control API is a convenient client library that allows you to easily integrate Maps into your web application. Açık REST hizmet çağrılarının karmaşıklığını gizlemesinin yanı sıra, stili değiştirilebilen ve özelleştirilebilen bileşenlerle üretkenliğinizi arttırır.It hides the complexity of the bare REST service calls and boosts your productivity with styleable and customizable components. Aşağıdaki adımlarda, Harita Denetimi API’sinin tümleşik olduğu statik bir HTML sayfasının nasıl oluşturulacağı gösterilmektedir.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. Yerel makinenizde yeni bir dosya oluşturun ve bu dosyayı MapSearch.html olarak adlandırın.On your local machine, create a new file and name it MapSearch.html.

  2. Aşağıdaki HTML bileşenlerini dosyaya ekleyin:Add the following HTML components to the file:

     <!DOCTYPE html>
     <html>
     <head>
         <title>Map Search</title>
         <meta charset="utf-8">
         <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>
    
         <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
         <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
    
         <script>
         function GetMap(){
             //Add Map Control JavaScript code here.
         }
         </script>
    
         <style>
             html,
             body {
                 width: 100%;
                 height: 100%;
                 padding: 0;
                 margin: 0;
             }
    
             #myMap {
                 width: 100%;
                 height: 100%;
             }
         </style>
     </head>
     <body onload="GetMap()">
         <div id="myMap"></div>
     </body>
     </html>
    

    HTML üst bilgisinin Azure Harita Denetimi kitaplığı tarafından barındırılan CSS ve JavaScript kaynak dosyalarını içerdiğine dikkat edin.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Sayfanın gövdesinde bulunan ve sayfa yüklendiğinde onload işlevini çağıracak olan GetMap olayına dikkat edin.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. GetMap işlevi, Azure Maps API 'Lerine erişmek için satır içi JavaScript kodunu içerecektir.The GetMap function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. HTML dosyasının GetMap işlevine aşağıdaki JavaScript kodunu ekleyin.Add the following JavaScript code to the GetMap function of the HTML file. Dize <Your Azure Maps Key>, haritalar hesabınızdan kopyaladığınız birincil anahtarla değiştirin.Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //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>'
        }
    });
    

    Bu segment, Azure Haritalar hesap anahtarınız için Harita Denetimi API’sini başlatır.This segment initializes the Map Control API for your Azure Maps account key. atlas, API ve ilgili görsel bileşenleri içeren ad alanıdır.atlas is the namespace that contains the API and related visual components. atlas.Map, görsel ve etkileşimli bir Web haritası için denetim sağlar.atlas.Map provides the control for a visual and interactive web map.

  4. Değişikliklerinizi dosyaya kaydedin ve HTML sayfasını bir tarayıcıda açın.Save your changes to the file and open the HTML page in a browser. Bu, hesap anahtarınızı kullanarak atlas.Map çağırarak yapabileceğiniz en temel eşlemedir.This is the most basic map that you can make by calling atlas.Map using your account key.

    Haritayı görüntüleme

  5. GetMap işlevinde haritanın başlatıldığı bölümün altına aşağıdaki JavaScript kodunu ekleyin.In the GetMap function, after initializing the map, add the following JavaScript code.

    //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 layer for rendering point data.
        var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                image: 'pin-round-darkblue',
                anchor: 'center',
                allowOverlap: true
            },
            textOptions: {
                anchor: "top"
            }
        });
    
        map.layers.add(resultLayer);
    });
    

    Bu kod segmentinde haritaya bir ready olayı eklenir, bu, harita kaynakları yüklendiğinde ve eşleme erişilmeye hazırsanız harekete geçilir.In this code segment a ready event is added to the map, which will fire when the map resources have been loaded and the map is ready to be accessed. Map ready olay işleyicisinde, sonuç verilerini depolamak için bir veri kaynağı oluşturulur.In the map ready event handler, a data source is created to store result data. Bir simge katmanı oluşturulur ve veri kaynağına eklenir.A symbol layer is created and attached to the data source. Bu katman, veri kaynağındaki sonuç verilerin nasıl işleneceğini belirtir. Bu örnekte sonuç koordinatlarının üzerinde ortalanmış olan ve diğer simgelerin çakışmasına izin verilen koyu mavi yuvarlak raptiye simgesi şeklindedir.This layer specifies how the result data in the data source should be rendered, in this case with a dark blue round pin icon that is centered over the results coordinate and which allows other icons to overlap. Sonuç katmanı harita katmanlarına eklenir.The result layer is added to the map layers.

Arama özellikleri eklemeAdd search capabilities

Bu bölümde, haritalarınızın bir ilgi noktasını bulmak için haritalar Arama API 'sinin nasıl kullanılacağı gösterilmektedir.This section shows how to use the Maps Search API to find a point of interest on your map. Bu, geliştiricilerin adres, ilgi çekici nokta ve diğer coğrafi bilgileri araması için tasarlanmış bir RESTful API’dir.It's a RESTful API designed for developers to search for addresses, points of interest, and other geographical information. Arama hizmeti, belirtilen bir adrese enlem ve boylam bilgileri atar.The Search service assigns a latitude and longitude information to a specified address. Aşağıda açıklanan Hizmet Modülü, Haritalar Arama API'si ile konum bulmaya yönelik aramalarda kullanılabilir.The Service Module explained below can be used to search for a location using the Maps Search API.

Hizmet ModülüService Module

  1. Map ready olay işleyicisinde, aşağıdaki JavaScript kodunu ekleyerek arama hizmeti URL 'sini oluşturun.In the map ready event handler, construct the search service URL by adding the following Javascript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the SearchURL object
    var searchURL = new atlas.service.SearchURL(pipeline); 
    

    SubscriptionKeyCredential, Azure Maps 'a yönelik HTTP isteklerinin kimliğini abonelik anahtarıyla doğrulamak için bir SubscriptionKeyCredentialPolicy oluşturur.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline(), SubscriptionKeyCredential ilkesinde sürer ve bir işlem hattı örneği oluşturur.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. searchURL, Azure Maps arama işlemlerine yönelik bir URL 'yi temsil eder.The searchURL represents a URL to Azure Maps Search operations.

  2. Ardından arama sorgusunu oluşturmak için aşağıdaki betik bloğunu ekleyin.Next add the following script block to build the search query. Bu, Arama Hizmetinin temel arama API'si olan Belirsiz Arama Hizmetini kullanır.It uses the Fuzzy Search Service, which is a basic search API of the Search Service. Belirsiz Arama Hizmeti adres, yer ve ilgi çekici nokta (POI) gibi çoğu belirsiz girişi işler.Fuzzy Search Service handles most fuzzy inputs like addresses, places, and points of interest (POI). Bu kod, belirtilen enlem ve boylamın belirtilen yarıçapı içinde yakındaki Alipop Istasyonlarını arar.This code searches for nearby Gasoline Stations within the specified radius of the provided latitude and longitude. Yanıttan bir GeoJSON Özellik koleksiyonu daha sonra geojson.getFeatures() yöntemi kullanılarak ayıklanır ve veri kaynağına eklenir. Bu, otomatik olarak, sembol katmanı aracılığıyla haritada işlenen verilere neden olur.A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source, which automatically results in the data being rendered on the map via the symbol layer. Betiğin son bölümü haritanın setCamera özelliğini kullanarak sonuçların sınırlayıcı kutusuna göre harita kamera görünümünü ayarlar.The last part of the script sets the maps camera view using the bounding box of the results using the Map's setCamera property.

    var query =  'gasoline-station';
    var radius = 9000;
    var lat = 47.64452336193245;
    var lon = -122.13687658309935;
    
    searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
        limit: 10,
        lat: lat,
        lon: lon,
        radius: radius
    }).then((results) => {
    
        // Extract GeoJSON feature collection from the response and add it to the datasource
        var data = results.geojson.getFeatures();
        datasource.add(data);
    
        // set camera to bounds to show the results
        map.setCamera({
            bounds: data.bbox,
            zoom: 10
        });
    });
    
  3. MapSearch.html dosyasını kaydedin ve tarayıcınızı yenileyin.Save the MapSearch.html file and refresh your browser. Artık haritanın, alanda akarine istasyonların konumlarını işaretleyen yuvarlak mavi PIN 'ler ile Seattle üzerinde ortalanmasını görmeniz gerekir.You should now see that the map is centered on Seattle with round-blue pins marking the locations of gasoline stations in the area.

    Arama sonuçlarıyla haritayı görüntüleme

  4. Tarayıcınıza aşağıdaki HTTP İsteğini girerek, haritanın işlediği ham verileri görebilirsiniz.You can see the raw data that the map is rendering by entering the following HTTPRequest in your browser. <Azure Haritalar Anahtarınız> değerini birincil anahtarınızla değiştirin.Replace <Your Azure Maps Key> with your primary key.

    https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=gasoline%20station&subscription-key=<subscription-key>&lat=47.6292&lon=-122.2337&radius=100000
    

Bu noktada MapSearch sayfası, belirsiz arama sorgusundan döndürülen ilgi çekici noktaların konumlarını görüntüleyebilir.At this point, the MapSearch page can display the locations of points of interest that are returned from a fuzzy search query. Şimdi bazı etkileşimli özellikler ve konumlar hakkında daha fazla bilgi ekleyelim.Let's add some interactive capabilities and more information about the locations.

Etkileşimli veri eklemeAdd interactive data

Şu ana kadar oluşturduğumuz harita, arama sonuçları için yalnızca boylam/enlem verilerine bakar.The map that we've made so far only looks at the longitude/latitude data for the search results. Ancak Haritalar Arama hizmetinin döndürdüğü işlenmemiş JSON’a bakarsanız, bunun ad ve açık adres de dahil olmak üzere her bir benzin istasyonuyla ilgili ek bilgiler içerdiğini görürsünüz.If you look at the raw JSON that the Maps Search service returns, however, you see that it contains additional information about each gas station, including the name and street address. Etkileşimli açılır kutularla haritada bu verilere yer verebilirsiniz.You can incorporate that data into the map with interactive popup boxes.

  1. Benzer arama hizmetini sorgulamak için koddan sonra Map ready olay işleyicisine aşağıdaki kod satırlarını ekleyin.Add the following lines of code in the map ready event handler after the code to query the fuzzy search service. Bu kod bir açılır pencere örneği oluşturur ve simge katmanına fare ile üzerine gelindiğinde gerçekleştirilecek bir olay ekler.This will create an instance of a Popup and add a mouseover event to the symbol layer.

    //Create a popup but leave it closed so we can update it and display it later.
    popup = new atlas.Popup();
    
    //Add a mouse over event to the result layer and display a popup when this event fires.
    map.events.add('mouseover', resultLayer, showPopup);
    

    API *atlas.Popup, haritada gereken konuma bağlanmış bir bilgi penceresi sağlar.The API *atlas.Popup provides an information window anchored at the required position on the map.

  2. Açılan pencerede kullanılan sonuç bilgilerini görüntülemek için GetMap işlevi içine aşağıdaki kodu ekleyin.Add the following code within the GetMap function, to show the moused over result information in the popup.

    function showPopup(e) {
        //Get the properties and coordinates of the first shape that the event occured on.
    
        var p = e.shapes[0].getProperties();
        var position = e.shapes[0].getCoordinates();
    
        //Create HTML from properties of the selected result.
        var html = `
          <div style="padding:5px">
            <div><b>${p.poi.name}</b></div>
            <div>${p.address.freeformAddress}</div>
            <div>${position[1]}, ${position[0]}</div>
          </div>`;
    
        //Update the content and position of the popup.
        popup.setPopupOptions({
            content: html,
            position: position
        });
    
        //Open the popup.
        popup.open(map);
    }
    
  3. Dosyayı kaydedin ve tarayıcınızı yenileyin.Save the file and refresh your browser. Şimdi tarayıcıdaki haritada, herhangi bir arama raptiyesinin üzerine gelip beklediğinizde bilgi açılan pencereleri gösterilir.Now the map in the browser shows information pop-ups when you hover over any of the search pins.

    Azure Harita Denetimi ve Arama Hizmeti

Sonraki adımlarNext steps

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:In this tutorial, you learned how to:

  • Azure Maps hesabı oluşturmaCreate an account with Azure Maps
  • Hesabınızın birincil anahtarını almaGet the primary key for your account
  • Harita Denetimi API’sini kullanarak yeni web sayfası oluşturmaCreate new web page using Map Control API
  • Arama Hizmeti’ni kullanarak yakınlardaki istenen konumları bulmaUse Search Service to find nearby point of interest

Sonraki öğreticide, iki konum arasındaki bir yolun nasıl görüntüleneceği gösterilmektedir.The next tutorial demonstrates how to display a route between two locations.