Öğretici: Azure Haritalar kullanarak yakınlardaki ilgi çekici noktaları arama

Makale
04/30/2024

Bu öğreticide, Azure Haritalar hesabı ayarlama ve sonra Haritalar API’lerini kullanarak ilgi çekici bir noktayı arama işlemleri gösterilmektedir. Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Azure Haritalar hesabı oluşturma
Haritalar hesabınızın abonelik anahtarını alma
Harita denetimi API’sini kullanarak yeni bir web sayfası oluşturma
Haritalar arama hizmetini kullanarak yakınlardaki bir ilgi çekici noktayı bulma

Önkoşullar

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Azure Haritalar hesabı
Abonelik anahtarı

Not

Azure Haritalar kimlik doğrulaması hakkında daha fazla bilgi için bkz. Azure Haritalar kimlik doğrulamasını yönetme.

Yeni harita oluşturma

Harita Denetimi API'si kullanışlı bir istemci kitaplığıdır. Bu API, Haritalar web uygulamanızla kolayca tümleştirmenizi sağlar. Çıplak REST hizmeti çağrılarının karmaşıklığını gizler ve özelleştirilebilir bileşenlerle üretkenliğinizi artırır. 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.

Yerel makinenizde yeni bir dosya oluşturun ve bu dosyayı MapSearch.html olarak adlandırın.

Aşağıdaki HTML bileşenlerini dosyaya ekleyin:

 <!DOCTYPE html>
 <html>
 <head>
     <title>Map Search</title>
     <meta charset="utf-8" />

     <!-- 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>
     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>

Yukarıdaki HTML ile ilgili bilinmesi gereken bazı noktalar:

HTML üst bilgisi, Azure Harita Denetimi kitaplığı tarafından barındırılan CSS ve JavaScript kaynak dosyalarını içerir.
Sayfanın onload gövdesindeki olay, sayfanın gövdesi yüklendiğinde işlevini çağırır GetMap .
İşlev, GetMap Azure Haritalar API'lerine erişmek için kullanılan satır içi JavaScript kodunu içerir. Sonraki adımda eklenir.

HTML dosyasının GetMap işlevine aşağıdaki JavaScript kodunu ekleyin. dizesini<Your Azure Maps Subscription Key>, Azure Haritalar hesabınızdan kopyaladığınız abonelik anahtarıyla değiştirin.
```
//Instantiate a map object
var map = new atlas.Map("myMap", {
    view: 'Auto',

    // Add your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});
```
Yukarıdaki JavaScript ile ilgili bilinmesi gereken bazı noktalar:
- Azure Haritalar hesap anahtarınız için Harita Denetimi API'sini başlatan işlevin çekirdeğiGetMap.
- atlas , API'yi ve ilgili görsel bileşenleri içeren ad alanıdır.
- atlas.Map görsel ve etkileşimli bir web haritası için denetim sağlar.
Değişikliklerinizi dosyaya kaydedin ve HTML sayfasını bir tarayıcıda açın. Gösterilen harita, hesap anahtarınızı kullanarak arayarak atlas.Map yapabileceğiniz en temel haritadır.
GetMap işlevinde haritanın başlatıldığı bölümün altına aşağıdaki JavaScript kodunu ekleyin.
```
//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 hakkında:
- ready Haritaya bir olay eklenir ve bu olay, harita kaynaklarının yüklenmesi bittiğinde ve haritaya erişilmeye hazır olduğunda tetikler.
- Eşleme ready olay işleyicisinde, sonuç verilerini depolamak için bir veri kaynağı oluşturulur.
- Bir simge katmanı oluşturulur ve veri kaynağına eklenir. Bu katman, veri kaynağındaki sonuç verilerinin nasıl işlenmesi gerektiğini belirtir. Bu durumda sonuç, diğer simgelerin çakışmasına izin veren sonuçlar koordinatı üzerinde ortalanmış koyu mavi yuvarlak raptiye simgesiyle işlenir.
- Sonuç katmanı harita katmanlarına eklenir.

Arama özellikleri ekleme

Bu bölümde haritanızda ilgi çekici bir nokta bulmak için Haritalar Arama API'sinin nasıl kullanılacağı gösterilmektedir. Bu, geliştiricilerin adres, ilgi çekici nokta ve diğer coğrafi bilgileri araması için tasarlanmış bir RESTful API’dir. Arama hizmeti, belirtilen bir adrese enlem ve boylam bilgileri atar.

İpucu

Azure Haritalar, Azure Haritalar JavaScript REST SDK'sı için bir dizi npm modülü sunar. Bu modüller, Node.js uygulamalarında Azure Haritalar REST hizmetlerinin kullanımını basitleştiren istemci kitaplıklarını içerir. Kullanılabilir modüllerin tam listesi için bkz. JavaScript/TypeScript REST SDK Geliştirici Kılavuzu (önizleme).

Arama hizmeti

Eşleme ready olay işleyicisine aşağıdaki betik bloğunu ekleyin. Bu, arama sorgusunu oluşturmaya ilişkin koddur. Arama Hizmeti'nin temel arama API'si olan Benzer Arama hizmeti kullanır. Benzer Arama hizmeti adresler, yerler ve ilgi çekici noktalar (POI) gibi çoğu benzer girişi işler. Bu kod, sağlanan enlem ve boylamların belirtilen yarıçapı içinde yakındaki benzin istasyonlarını arar. Daha sonra bir GeoJSON özellik koleksiyonu ayıklanır ve veri kaynağına eklenir ve bu da verilerin haritalar sembol katmanında işlenmesine neden olur. Bu betik bloğunun son bölümü, Harita'nın set Kamera özelliğini kullanarak sonuçların sınırlayıcı kutusunu kullanarak haritalar kamera görünümünü ayarlar.

var query = 'gasoline-station';
var radius = 9000;
var lat = 47.64452336193245;
var lon = -122.13687658309935;
var url = `https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=${query}&lat=${lat}&lon=${lon}&radius=${radius}`;

fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var bounds = [];

    //Extract GeoJSON feature collection from the response and add it to the datasource
    var data = response.results.map((result) => {
        var position = [result.position.lon, result.position.lat];
        bounds.push(position);
        return new atlas.data.Feature(new atlas.data.Point(position), { ...result });
    });
    datasource.add(data);

    //Set camera to bounds to show the results
    map.setCamera({
        bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
        zoom: 10,
        padding: 15
    });
});

MapSearch.html dosyasını kaydedin ve tarayıcınızı yenileyin. Bölgedeki benzin istasyonlarının konumları için yuvarlak mavi raptiyeli haritanın Seattle'da ortalanmış olduğunu görmeniz gerekir.
Tarayıcınıza aşağıdaki HTTP İsteğini girerek, haritanın işlediği ham verileri görebilirsiniz. <Your Azure Maps Subscription Key> değerini abonelik anahtarınızla değiştirin.
```
https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=gasoline%20station&subscription-key={Your-Azure-Maps-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. Şimdi bazı etkileşimli özellikler ve konumlar hakkında daha fazla bilgi ekleyelim.

Etkileşimli veri ekleme

Şu ana kadar oluşturduğumuz harita, arama sonuçları için yalnızca boylam/enlem verilerine bakar. Ancak, Haritalar Arama hizmeti'nin döndürdüğü ham JSON, her bir benzin istasyonu hakkında ek bilgi içerir. Ad ve sokak adresi dahil. Etkileşimli açılır kutularla haritada bu verilere yer verebilirsiniz.

Benzer arama hizmetini sorgulamak için koddan sonra eşleme ready olay işleyicisine aşağıdaki kod satırlarını ekleyin. Bu kod bir Açılır Pencere örneği oluşturur ve simge katmanına bir fareyle geçiş olayı ekler.
```
// 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 , harita üzerinde gerekli konuma sabitlenmiş bir bilgi penceresi sağlar.

Aşağıdaki kod satırlarını harita ready olay işleyicisine koddan sonra ekleyerek bir Açılan pencere örneği oluşturun ve simge katmanına bir fareyle geçiş olayı ekleyin. Bu kod, fareyle ilgilendiğiniz bir noktanın üzerine gelindiğinde sonuçları içeren bir açılır pencere gösterir.

function showPopup(e) {
    //Get the properties and coordinates of the first shape that the event occurred 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);
}

Dosyayı kaydedin ve tarayıcınızı yenileyin. Artık tarayıcıdaki harita, arama raptiyelerinden herhangi birinin üzerine geldiğinizde bilgi açılır pencerelerini gösterir.

Bu öğreticide kullanılan tamamlanmış kod için GitHub'daki arama öğreticisine bakın.
Bu örneği canlı olarak görüntülemek için bkz. Azure Haritalar Kod Örnekleri sitesinde ilgi çekicinoktaları arama.

Sonraki adımlar

Sonraki öğreticide, iki konum arasındaki bir yolun nasıl görüntüleneceği gösterilmektedir.

Bir hedefe yönlendirme