Azure haritalar 'ı kullanarak bir mağaza Bulucu oluşturmaCreate a store locator by using Azure Maps

Bu öğretici, Azure haritalar 'ı kullanarak basit bir depolama Konumlandırıcı oluşturma sürecinde size rehberlik eder.This tutorial guides you through the process of creating a simple store locator by using Azure Maps. Mağaza bulleyicileri ortaktır.Store locators are common. Bu tür uygulamalarda kullanılan kavramların birçoğu, diğer birçok uygulama türü için geçerlidir.Many of the concepts that are used in this type of application are applicable to many other types of applications. Müşterilere bir mağaza bulucunun teklif etmek, doğrudan tüketicilere satış yapan işletmelerin bir sunudur.Offering a store locator to customers is a must for most businesses that sell directly to consumers. Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:In this tutorial, you learn how to:

  • Azure Harita Denetimi API 'sini kullanarak yeni bir Web sayfası oluşturun.Create a new webpage by using the Azure Map Control API.
  • Bir dosyadan özel verileri yükleyin ve bir haritada görüntüleyin.Load custom data from a file and display it on a map.
  • Azure haritalar arama hizmetini kullanarak bir adres bulun veya bir sorgu girin.Use the Azure Maps Search service to find an address or enter a query.
  • Tarayıcıdan kullanıcının konumunu alın ve haritada görüntüleyin.Get the user's location from the browser and show it on the map.
  • Haritada özel semboller oluşturmak için birden çok katmanı birleştirin.Combine multiple layers to create custom symbols on the map.
  • Küme veri noktaları.Cluster data points.
  • Haritaya yakınlaştırma denetimleri ekleyin.Add zoom controls to the map.

Canlı mağaza Bulucu örneğine veya kaynak kodunaatlayın.Jump ahead to the live store locator example or source code.

ÖnkoşullarPrerequisites

Bu öğreticideki adımları tamamlayabilmeniz için öncelikle Azure haritalar hesabınızı oluşturmanız ve hesabınızın birincil abonelik anahtarını almak için birincil anahtar al bölümündeki adımları izlemeniz gerekir.To complete the steps in this tutorial, you first need to create your Azure Maps account and follow the steps in get primary key to get the primary subscription key for your account.

TasarımDesign

Koda geçmeden önce tasarım ile başlamak iyi bir fikirdir.Before you jump into the code, it's a good idea to begin with a design. Mağaza konumlarınız, olmasını istediğiniz kadar basit veya karmaşık olabilir.Your store locator can be as simple or complex as you want it to be. Bu öğreticide, basit bir mağaza Bulucu oluşturacağız.In this tutorial, we create a simple store locator. Tercih ediyorsanız bazı işlevleri genişletmenize yardımcı olmak için bazı ipuçları ekledik.We include some tips along the way to help you extend some functionalities if you choose to. Contoso kahve adlı kurgusal bir şirket için mağaza Bulucu oluşturacağız.We create a store locator for a fictional company called Contoso Coffee. Aşağıdaki şekilde, bu öğreticide oluşturduğumuz mağaza bulucunun genel düzeninin bir tel kafes 'i gösterilmektedir:The following figure shows a wireframe of the general layout of the store locator we build in this tutorial:


Contoso kahve için bir mağaza bulucunun tel kafes mağaza konumları

Wireframe of a store locator for Contoso Coffee coffee shop locations

Bu mağaza bulucunun kullanışlılığını en üst düzeye çıkarmak için, bir kullanıcının ekran genişliği 700 pikselden daha küçük olduğunda ayarlayan bir yanıt veren düzen ekledik.To maximize the usefulness of this store locator, we include a responsive layout that adjusts when a user's screen width is smaller than 700 pixels wide. Hızlı yanıt veren bir düzen, mağaza bulucunun bir mobil cihazda olduğu gibi küçük bir ekranda kullanılmasını kolaylaştırır.A responsive layout makes it easy to use the store locator on a small screen, like on a mobile device. Küçük ekran düzeninin tel kafesi aşağıda verilmiştir:Here's a wireframe of a small-screen layout:


Bir mobil cihazda contoso kahve Mağazası bulucunun tel kafes 'i

Wireframe of the Contoso Coffee store locator on a mobile device

Wireframes oldukça basittir bir uygulama gösterir.The wireframes show a fairly straightforward application. Uygulamanın bir arama kutusu, yakındaki mağazaların listesi, bazı işaretçileri olan bir eşlem (semboller) ve Kullanıcı bir işaretleyici seçtiğinde ek bilgi görüntüleyen bir açılır pencere.The application has a search box, a list of nearby stores, a map that has some markers (symbols), and a pop-up window that displays additional information when the user selects a marker. Daha ayrıntılı bilgi için, bu öğreticide bu mağaza bulucusunu geliştirdiğimiz özellikler şunlardır:In more detail, here are the features we build into this store locator in this tutorial:

  • İçeri aktarılan sekmeyle ayrılmış veri dosyasındaki tüm konumlar haritaya yüklenir.All locations from the imported tab-delimited data file are loaded on the map.
  • Kullanıcı Haritayı açabilir ve yakınlaştırabilir, bir arama gerçekleştirebilir ve konumumu GPS düğmesini seçebilir.The user can pan and zoom the map, perform a search, and select the My Location GPS button.
  • Sayfa düzeni, cihaz ekranının genişliğine göre ayarlanır.The page layout adjusts based on the width of the device screen.
  • Bir üst bilgi mağaza logosunu gösterir.A header shows the store logo.
  • Kullanıcı, adres, posta kodu veya şehir gibi bir konum aramak için bir arama kutusu ve arama düğmesi kullanabilir.The user can use a search box and search button to search for a location, such as an address, postal code, or city.
  • Arama keypress kutusuna eklenen bir olay, Kullanıcı ENTER tuşuna bastığında aramayı tetikler.A keypress event added to the search box triggers a search if the user presses Enter. Bu işlevsellik genellikle daha fazla bakmış olsa da daha iyi bir kullanıcı deneyimi oluşturur.This functionality often is overlooked, but it creates a better user experience.
  • Harita taşırken, eşlemenin merkezinden her konum için uzaklık hesaplanır.When the map moves, the distance to each location from the center of the map is calculated. Sonuçlar listesi haritanın en üstündeki konumları görüntüleyecek şekilde güncelleştirilir.The results list is updated to display the closest locations at the top of the map.
  • Sonuçlar listesinde bir sonuç seçtiğinizde, eşleme seçilen konumun üzerine ortalanır ve konum hakkındaki bilgiler açılır pencerede görüntülenir.When you select a result in the results list, the map is centered over the selected location and information about the location appears in a pop-up window.
  • Haritada belirli bir konumun seçilmesi bir açılır pencereyi de tetikler.Selecting a specific location on the map also triggers a pop-up window.
  • Kullanıcı uzaklaşır konumlar kümeler halinde gruplandırılır.When the user zooms out, locations are grouped in clusters. Kümeler, dairenin içinde sayı olan bir daireyle temsil edilir.Clusters are represented by a circle with a number inside the circle. Kullanıcı yakınlaştırma düzeyini değiştirdiğinde kümeler formu ve ayrı ayrı.Clusters form and separate as the user changes the zoom level.
  • Bir kümeyi seçmek, iki düzeyi haritada ve kümenin konumunu üzerine ortalar.Selecting a cluster zooms in on the map two levels and centers over the location of the cluster.

Depo konumu veri kümesini oluşturmaCreate the store location dataset

Bir mağaza Bulucu uygulaması geliştirmeden önce, haritada göstermek istediğimiz mağazaların bir veri kümesi oluşturuyoruz.Before we develop a store locator application, we need to create a dataset of the stores we want to display on the map. Bu öğreticide, contoso kahve adlı kurgusal bir kafeterde bir veri kümesi kullanacağız.In this tutorial, we use a dataset for a fictitious coffee shop called Contoso Coffee. Bu basit mağaza bulucunun veri kümesi bir Excel çalışma kitabında yönetilir.The dataset for this simple store locator is managed in an Excel workbook. Veri kümesi, dokuz ülkede/bölgede 10.213 contoso kahve kahve dükkanı yayma konumları içerir: Birleşik Devletler, Kanada, Birleşik Krallık, Fransa, Almanya, Italya, Hollanda, Danimarka ve Ispanya.The dataset contains 10,213 Contoso Coffee coffee shop locations spread across nine countries/regions: the United States, Canada, the United Kingdom, France, Germany, Italy, the Netherlands, Denmark, and Spain. Verilerin nasıl göründüğünü aşağıda görebilirsiniz:Here's a screenshot of what the data looks like:


Bir Excel çalışma kitabındaki depo Konumlandırıcı verilerinin ekran görüntüsü

Screenshot of the store locator data in an Excel workbook

Excel çalışma kitabını indirebilirsiniz.You can download the Excel workbook.

Verilerin ekran görüntüsüne bakarak aşağıdaki gözlemleri yapabiliriz:Looking at the screenshot of the data, we can make the following observations:

  • Konum bilgileri Adressatırı, şehir, municipsellik (ilçe), Adminbölüm (Eyalet/bölge), Postcode (posta kodu) ve ülke sütunları kullanılarak depolanır.Location information is stored by using the AddressLine, City, Municipality (county), AdminDivision (state/province), PostCode (postal code), and Country columns.
  • Enlem ve boylam sütunları, her contoso Coffee kahve dükkanı mağaza konumunun koordinatlarını içerir.The Latitude and Longitude columns contain the coordinates for each Contoso Coffee coffee shop location. Koordinat bilgilerine sahip değilseniz, Konum koordinatlarını öğrenmek için Azure haritalar 'daki arama hizmetleri ' ni kullanabilirsiniz.If you don't have coordinates information, you can use the Search services in Azure Maps to determine the location coordinates.
  • Bazı ek sütunlar, kafeterlerle ilgili meta veriler içerir: bir telefon numarası, Wi-Fi etkin noktası için Boole sütunları ve wheelsandalye erişilebilirliği ve açılış ve kapanış zamanlarını 24 saat biçiminde depola.Some additional columns contain metadata related to the coffee shops: a phone number, Boolean columns for Wi-Fi hotspot and wheelchair accessibility, and store opening and closing times in 24-hour format. Konum verilerinize daha uygun olan meta verileri içeren kendi sütunlarınızı oluşturabilirsiniz.You can create your own columns that contain metadata that’s more relevant to your location data.

Not

Azure Maps, verileri küresel Mercator projeksiyonu "EPSG: 3857" olarak işler, ancak WGS84 Datum kullanan "EPSG: 4325" içindeki verileri okur.Azure Maps renders data in the spherical Mercator projection "EPSG:3857" but reads data in "EPSG:4325" that use the WGS84 datum.

Veri kümesini uygulamada açığa çıkarmak için birçok yol vardır.There are many ways to expose the dataset to the application. Bir yaklaşım, verileri bir veritabanına yüklemek ve verileri sorgulayan ve sonuçları kullanıcının tarayıcısına gönderen bir Web hizmetini kullanıma sunmasıdır.One approach is to load the data into a database and expose a web service that queries the data and sends the results to the user’s browser. Bu seçenek, büyük veri kümeleri veya sık güncellenen veri kümeleri için idealdir.This option is ideal for large datasets or for datasets that are updated frequently. Ancak, bu seçenek önemli ölçüde daha fazla geliştirme çalışması gerektirir ve maliyeti daha yüksektir.However, this option requires significantly more development work and has a higher cost.

Başka bir yaklaşım, bu veri kümesini tarayıcının kolayca ayrıştırabileceği düz bir metin dosyasına dönüştürmesidir.Another approach is to convert this dataset into a flat text file that the browser can easily parse. Dosyanın kendisi, uygulamanın geri kalanı ile barındırılabilir.The file itself can be hosted with the rest of the application. Bu seçenek, şeyleri basit tutar, ancak kullanıcı tüm verileri indirdiğinden daha küçük veri kümeleri için iyi bir seçenektir.This option keeps things simple, but it's a good option only for smaller datasets because the user downloads all the data. Veri dosyasının boyutu 1 MB 'tan küçük olduğundan bu veri kümesi için düz metin dosyası kullanıyoruz.We use the flat text file for this dataset because the data file size is smaller than 1 MB.

Çalışma kitabını düz metin dosyasına dönüştürmek için çalışma kitabını sekmeyle ayrılmış bir dosya olarak kaydedin.To convert the workbook to a flat text file, save the workbook as a tab-delimited file. Her sütun bir sekme karakteriyle sınırlandırılır, bu da sütunları kodlarımızda ayrıştırmayı kolaylaştırır.Each column is delimited by a tab character, which makes the columns easy to parse in our code. Virgülle ayrılmış değer (CSV) biçimi kullanabilirsiniz, ancak bu seçenek daha fazla ayrıştırma mantığı gerektirir.You could use comma-separated value (CSV) format, but that option requires more parsing logic. İçinde virgül olan herhangi bir alan, tırnak işaretleriyle kaydırılır.Any field that has a comma around it would be wrapped with quotation marks. Bu verileri Excel 'de sekmeyle ayrılmış bir dosya olarak dışarı aktarmak için farklı kaydet' i seçin.To export this data as a tab-delimited file in Excel, select Save As. Farklı kaydet türü aşağı açılan listesinde metin (sekmeyle sınırlandırılmış) (*. txt) seçeneğini belirleyin.In the Save as type drop-down list, select Text (Tab delimited)(*.txt). Dosyayı ContosoCoffee. txtolarak adlandırın.Name the file ContosoCoffee.txt.


Farklı Kaydet tür iletişim kutusunun ekran görüntüsü

Screenshot of the Save as type dialog box

Metin dosyasını Not defteri 'nde açarsanız, aşağıdaki şekle benzer şekilde görünür:If you open the text file in Notepad, it looks similar to the following figure:


Sekmeyle ayrılmış bir veri kümesi gösteren bir not defteri dosyasının ekran görüntüsü

Screenshot of a Notepad file that shows a tab-delimited dataset

Projeyi ayarlamaSet up the project

Projeyi oluşturmak için, Visual Studio 'yu veya seçtiğiniz kod düzenleyicisini kullanabilirsiniz.To create the project, you can use Visual Studio or the code editor of your choice. Proje klasörünüzde üç dosya oluşturun: index. html, index. cssve index. js.In your project folder, create three files: index.html, index.css, and index.js. Bu dosyalar, uygulamanın yerleşimini, stilini ve mantığını tanımlar.These files define the layout, style, and logic for the application. Data adlı bir klasör oluşturun ve klasöre ContosoCoffee. txt ekleyin.Create a folder named data and add ContosoCoffee.txt to the folder. Görüntüleradlı başka bir klasör oluşturun.Create another folder named images. Haritada simgeler, düğmeler ve işaretçiler için bu uygulamada on görüntü kullanıyoruz.We use ten images in this application for icons, buttons, and markers on the map. Bu görüntüleri indirebilirsiniz.You can download these images. Proje klasörünüz artık aşağıdaki şekilde görünmelidir:Your project folder should now look like the following figure:


Basit depo Konumlandırıcı proje klasörünün ekran görüntüsü

Screenshot of the Simple Store Locator project folder

Kullanıcı arabirimini oluşturmaCreate the user interface

Kullanıcı arabirimini oluşturmak için index. htmldosyasına kod ekleyin:To create the user interface, add code to index.html:

  1. Aşağıdaki meta etiketleri index. html head dosyasına ekleyin.Add the following meta tags to the head of index.html. Etiketler, (UTF-8) karakter kümesini tanımlar, Internet Explorer ve Microsoft Edge 'in en son tarayıcı sürümlerini kullanmasını söyler ve yanıt veren düzenler için iyi bir görünüm penceresi belirtir.The tags define the character set (UTF-8), tell Internet Explorer and Microsoft Edge to use the latest browser versions, and specify a viewport that works well for responsive layouts.

    <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">
    
  2. Azure Maps Web Control JavaScript ve CSS dosyalarına başvurular ekleyin:Add references to the Azure Maps web 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>
    
  3. Azure haritalar Hizmetleri modülüne bir başvuru ekleyin.Add a reference to the Azure Maps Services module. Modül, Azure Maps REST hizmetlerini sarmalayan ve JavaScript 'te kullanımını kolaylaştıran bir JavaScript kitaplığı.The module is a JavaScript library that wraps the Azure Maps REST services and makes them easy to use in JavaScript. Modül, arama işlevselliğini güçetmek için kullanışlıdır.The module is useful for powering search functionality.

    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
    
  4. İndex. js ve index. cssöğesine başvurular ekleyin:Add references to index.js and index.css:

    <link rel="stylesheet" href="index.css" type="text/css">
    <script src="index.js"></script>
    
  5. Belge gövdesinde bir header etiket ekleyin.In the body of the document, add a header tag. header Etiket içinde, logo ve şirket adını ekleyin.Inside the header tag, add the logo and company name.

    <header>
        <img src="images/Logo.png" />
        <span>Contoso Coffee</span>
    </header>
    
  6. main Bir etiket ekleyin ve metin kutusu ve arama düğmesine sahip bir arama bölmesi oluşturun.Add a main tag and create a search panel that has a text box and search button. Ayrıca, harita div , liste paneli ve konumumu GPS için başvurular ekleyin.Also, add div references for the map, the list panel, and the My Location GPS button.

    <main>
        <div class="searchPanel">
            <div>
                <input id="searchTbx" type="search" placeholder="Find a store" />
                <button id="searchBtn" title="Search"></button>
            </div>
        </div>
        <div id="listPanel"></div>
        <div id="myMap"></div>
        <button id="myLocationBtn" title="My Location"></button>
    </main>
    

İşiniz bittiğinde index. html Bu örnek index. html dosyasıgibi görünmelidir.When you're finished, index.html should look like this example index.html file.

Sonraki adım CSS stillerini tanımlamaktır.The next step is to define the CSS styles. CSS stilleri, uygulama bileşenlerinin nasıl düzenlendiğini ve uygulamanın görünümünü tanımlar.CSS styles define how the application components are laid out and the application's appearance. İndex. css ' ye açın ve aşağıdaki kodu ekleyin.Open index.css and add the following code to it. @media Stil, ekran genişliği 700 pikselden küçük olduğunda kullanılacak alternatif stil seçeneklerini tanımlar.The @media style defines alternate style options to use when the screen width is smaller than 700 pixels.

 html, body {
     padding: 0;
     margin: 0;
     font-family: Gotham, Helvetica, sans-serif;
     overflow-x: hidden;
 }

 header {
     width: calc(100vw - 10px);
     height: 30px;
     padding: 15px 0 20px 20px;
     font-size: 25px;
     font-style: italic;
     font-family: "Comic Sans MS", cursive, sans-serif;
     line-height: 30px;
     font-weight: bold;
     color: white;
     background-color: #007faa;
 }

 header span {
     vertical-align: middle;
 }

 header img {
     height: 30px;
     vertical-align: middle;
 }

 .searchPanel {
     position: relative;
     width: 350px;
 }

 .searchPanel div {
     padding: 20px;
 }

 .searchPanel input {
     width: calc(100% - 50px);
     font-size: 16px;
     border: 0;
     border-bottom: 1px solid #ccc;
 }

 #listPanel {
     position: absolute;
     top: 135px;
     left: 0px;
     width: 350px;
     height: calc(100vh - 135px);
     overflow-y: auto;
 }

 #myMap { 
     position: absolute;
     top: 65px;
     left: 350px;
     width: calc(100vw - 350px);
     height: calc(100vh - 65px);
 }

 .statusMessage {
     margin: 10px;
 }

 #myLocationBtn, #searchBtn {
     margin: 0;
     padding: 0;
     border: none;
     border-collapse: collapse;
     width: 32px;
     height: 32px; 
     text-align: center;
     cursor: pointer;
     line-height: 32px;
     background-repeat: no-repeat;
     background-size: 20px;
     background-position: center center;
     z-index: 200;
 }

 #myLocationBtn {
     position: absolute;
     top: 150px;
     right: 10px;
     box-shadow: 0px 0px 4px rgba(0,0,0,0.16);
     background-color: white;
     background-image: url("images/GpsIcon.png");
 }

 #myLocationBtn:hover {
     background-image: url("images/GpsIcon-hover.png");
 }

 #searchBtn {
     background-color: transparent;
     background-image: url("images/SearchIcon.png");
 }

 #searchBtn:hover {
     background-image: url("images/SearchIcon-hover.png");
 }

 .listItem {
     height: 50px;
     padding: 20px;
     font-size: 14px;
 }

 .listItem:hover {
     cursor: pointer;
     background-color: #f1f1f1;
 }

 .listItem-title {
     color: #007faa;
     font-weight: bold;
 }

 .storePopup {
     min-width: 150px;
 }

 .storePopup .popupTitle {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 8px;
     height: 30px;
     background-color: #007faa;
     color: white;
     font-weight: bold;
 }

 .storePopup .popupSubTitle {
     font-size: 10px;
     line-height: 12px;
 }

 .storePopup .popupContent {
     font-size: 11px;
     line-height: 18px;
     padding: 8px;
 }

 .storePopup img {
     vertical-align:middle;
     height: 12px;
     margin-right: 5px;
 }

 /* Adjust the layout of the page when the screen width is less than 700 pixels. */
 @media screen and (max-width: 700px) {
     .searchPanel {
         width: 100vw;
     }

     #listPanel {
         top: 385px;
         width: 100%;
         height: calc(100vh - 385px);
     }

     #myMap {
         width: 100vw;
         height: 250px;
         top: 135px;
         left: 0px;
     }

     #myLocationBtn {
         top: 220px;
     }
 }

 .mapCenterIcon {
     display: block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: orange;
     border: 2px solid white;
     cursor: pointer;
     box-shadow: 0 0 0 rgba(0, 204, 255, 0.4);
     animation: pulse 3s infinite;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(0, 204, 255, 0.4);
     }

     70% {
         box-shadow: 0 0 0 50px rgba(0, 204, 255, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(0, 204, 255, 0);
     }
 }

Uygulamayı şimdi çalıştırırsanız, üst bilgi, arama kutusu ve arama düğmesini görürsünüz, ancak henüz yüklenmediği için harita görünür değildir.If you run the application now, you see the header, search box, and search button, but the map isn't visible because it hasn’t been loaded yet. Bir arama yapmayı denerseniz, hiçbir şey olmaz.If you try to do a search, nothing happens. Mağaza bulucunun tüm işlevlerine erişmek için sonraki bölümde açıklanan JavaScript mantığını ayarladık.We need to set up the JavaScript logic that's described in the next section to access all the functionality of the store locator.

JavaScript ile uygulamayı tel bağlantıWire the application with JavaScript

Bu noktada, her şey Kullanıcı arabiriminde ayarlanır.At this point, everything is set up in the user interface. Şimdi, verileri yüklemek ve ayrıştırmak için JavaScript 'i eklememiz ve sonra verileri haritada işlemesi gerekiyor.Now, we need to add the JavaScript to load and parse the data, and then render the data on the map. Başlamak için index. js ' yi açın ve aşağıdaki adımlarda açıklandığı gibi buna kod ekleyin.To get started, open index.js and add code to it, as described in the following steps.

  1. Ayarları daha kolay güncelleştirilmesini sağlamak için genel seçenekler ekleyin.Add global options to make settings easier to update. Ayrıca harita, bir açılan pencere, veri kaynağı, simge katmanı, bir arama alanının merkezini görüntüleyen HTML işaretleyicisi ve Azure haritalar arama hizmeti istemcisinin bir örneğini tanımlayın.Also, define variables for the map, a pop-up window, a data source, an icon layer, an HTML marker that displays the center of a search area, and an instance of the Azure Maps search service client.

    //The maximum zoom level to cluster data point data on the map.
    var maxClusterZoomLevel = 11;
    
    //The URL to the store location data.
    var storeLocationDataUrl = 'data/ContosoCoffee.txt';
    
    //The URL to the icon image.
    var iconImageUrl = 'images/CoffeeIcon.png';
    var map, popup, datasource, iconLayer, centerMarker, searchURL;
    
  2. İndex. js' ye kod ekleyin.Add code to index.js. Aşağıdaki kod eşlemeyi başlatır, sayfa yüklemeyi bitirene kadar bekleyen bir olay dinleyicisi ekler, haritanın yüklenmesini izlemek için olayları kablolendirir ve arama düğmesini ve konumumu kapatır düğmesini güçlendirir.The following code initializes the map, adds an event listener that waits until the page is finished loading, wires up events to monitor the loading of the map, and powers the search button and My Location button.

    Kullanıcı arama düğmesini seçtiğinde veya arama kutusuna bir konum girdikten sonra Kullanıcı ENTER tuşuna bastığında, kullanıcının sorgusuna yönelik belirsiz bir arama başlatılır.When the user selects the search button, or when the user presses Enter after entering a location in the search box, a fuzzy search against the user's query is initiated. Arama sonuçlarını bu ülkelere/bölgelerle sınırlamak için bir Country ISO countrySet 2 değerleri dizisi geçirin.Pass in an array of country ISO 2 values to the countrySet option to limit the search results to those countries/regions. Ülkeleri/bölgeleri arama yapılacak şekilde sınırlamak, döndürülen sonuçların doğruluğunu artırmaya yardımcı olur.Limiting the countries/regions to search helps increase the accuracy of the results that are returned.

    Arama tamamlandığında, ilk sonucu alın ve harita kamerayı bu alana ayarlayın.When the search is finished, take the first result and set the map camera over that area. Kullanıcı konumumu seçtiğinde, kullanıcının konumunu almak ve Haritayı konumlarına göre ortalamak için tarayıcıda yerleşik HTML5 coğrafi konum API 'sini kullanın.When the user selects the My Location button, use the HTML5 Geolocation API that's built into the browser to retrieve the user's location and center the map over their location.

    İpucu

    Açılır pencereleri kullanırken, tek Popup bir örnek oluşturmak ve içeriğini ve konumunu güncelleştirerek örneği yeniden kullanmak en iyisidir.When you use pop-up windows, it's best to create a single Popup instance and reuse the instance by updating its content and position. Kodunuza eklediğiniz Popupher örnek için, sayfaya birden fazla DOM öğesi eklenir.For every Popupinstance you add to your code, multiple DOM elements are added to the page. Sayfada daha fazla DOM öğesi varsa, tarayıcıda izlemek için gereken daha fazla şey vardır.The more DOM elements there are on a page, the more things the browser has to keep track of. Çok fazla öğe varsa tarayıcı yavaş kalabilir.If there are too many items, the browser might become slow.

    function initialize() {
        //Initialize a map instance.
        map = new atlas.Map('myMap', {
            center: [-90, 40],
            zoom: 2,
    
            //Add your Azure Maps primary subscription key to the map SDK.
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '<Your Azure Maps Key>'
            }
        });
    
        //Create a pop-up window, but leave it closed so we can update it and display it later.
        popup = new atlas.Popup();
    
        //Use SubscriptionKeyCredential with a subscription key
        const subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
        //Use subscriptionKeyCredential to create a pipeline
        const pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, {
            retryOptions: { maxTries: 4 } // Retry options
        });
    
        //Create an instance of the SearchURL client.
        searchURL = new atlas.service.SearchURL(pipeline);
    
        //If the user selects the search button, geocode the value the user passed in.
        document.getElementById('searchBtn').onclick = performSearch;
    
        //If the user presses Enter in the search box, perform a search.
        document.getElementById('searchTbx').onkeyup = function(e) {
            if (e.keyCode === 13) {
                performSearch();
            }
        };
    
        //If the user selects the My Location button, use the Geolocation API to get the user's location. Center and zoom the map on that location.
        document.getElementById('myLocationBtn').onclick = setMapToUserLocation;
    
        //Wait until the map resources are ready.
        map.events.add('ready', function() {
    
            //Add your post-map load functionality.
    
        });
    }
    
    //Create an array of country ISO 2 values to limit searches to. 
    var countrySet = ['US', 'CA', 'GB', 'FR','DE','IT','ES','NL','DK'];
    
    function performSearch() {
        var query = document.getElementById('searchTbx').value;
    
        //Perform a fuzzy search on the users query.
        searchURL.searchFuzzy(atlas.service.Aborter.timeout(3000), query, {
            //Pass in the array of country ISO2 for which we want to limit the search to.
            countrySet: countrySet
        }).then(results => {
            //Parse the response into GeoJSON so that the map can understand.
            var data = results.geojson.getFeatures();
    
            if (data.features.length > 0) {
                //Set the camera to the bounds of the results.
                map.setCamera({
                    bounds: data.features[0].bbox,
                    padding: 40
                });
            } else {
                document.getElementById('listPanel').innerHTML = '<div class="statusMessage">Unable to find the location you searched for.</div>';
            }
        });
    }
    
    function setMapToUserLocation() {
        //Request the user's location.
        navigator.geolocation.getCurrentPosition(function(position) {
            //Convert the Geolocation API position to a longitude and latitude position value that the map can interpret and center the map over it.
            map.setCamera({
                center: [position.coords.longitude, position.coords.latitude],
                zoom: maxClusterZoomLevel + 1
            });
        }, function(error) {
            //If an error occurs when the API tries to access the user's position information, display an error message.
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert('User denied the request for geolocation.');
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert('Position information is unavailable.');
                    break;
                case error.TIMEOUT:
                    alert('The request to get user position timed out.');
                    break;
                case error.UNKNOWN_ERROR:
                    alert('An unknown error occurred.');
                    break;
            }
        });
    }
    
    //Initialize the application when the page is loaded.
    window.onload = initialize;
    
  3. Haritanın ready olay dinleyicisinde, bir arama alanının merkezini göstermek için bir yakınlaştırma denetimi ve HTML işaretleyicisi ekleyin.In the map's ready event listener, add a zoom control and an HTML marker to display the center of a search area.

    //Add a zoom control to the map.
    map.controls.add(new atlas.control.ZoomControl(), {
        position: 'top-right'
    });
    
    //Add an HTML marker to the map to indicate the center to use for searching.
    centerMarker = new atlas.HtmlMarker({
        htmlContent: '<div class="mapCenterIcon"></div>',
        position: map.getCamera().center
    });
    
    map.markers.add(centerMarker);
    
  4. Haritanın ready olay dinleyicisinde bir veri kaynağı ekleyin.In the map's ready event listener, add a data source. Ardından, veri kümesini yükleme ve ayrıştırma çağrısı yapın.Then, make a call to load and parse the dataset. Veri kaynağında kümelendirmeyi etkinleştirin.Enable clustering on the data source. Veri kaynağı gruplarında, çakışan noktaları bir kümede birlikte bulunan kümelendirmelidir.Clustering on the data source groups overlapping points together in a cluster. Kümeler, Kullanıcı yakınlaşarak tek tek noktalara ayrılır.The clusters separate into individual points as the user zooms in. Bu, daha akıcı bir kullanıcı deneyimi sağlar ve performansı geliştirir.This makes a more fluid user experience and improves performance.

    //Create a data source, add it to the map, and then enable clustering.
    datasource = new atlas.source.DataSource(null, {
        cluster: true,
        clusterMaxZoom: maxClusterZoomLevel - 1
    });
    
    map.sources.add(datasource);
    
    //Load all the store data now that the data source is defined.  
    loadStoreData();
    
  5. Veri kümesini haritanın ready olay dinleyicisine yükledikten sonra, verileri işlemek için bir katman kümesi tanımlayın.After you load the dataset in the map's ready event listener, define a set of layers to render the data. Bir kabarcık katmanı, kümelenmiş veri noktalarını işlemek için kullanılır.A bubble layer is used to render clustered data points. Balon katmanının üzerindeki her kümedeki noktaların sayısını işlemek için bir sembol katmanı kullanılır.A symbol layer is used to render the number of points in each cluster above the bubble layer. İkinci bir sembol katmanı, haritadaki ayrı konumlar için özel bir simge oluşturur.A second symbol layer renders a custom icon for individual locations on the map.

    Kullanıcı haritada bir kümenin veya simgenin üzerine geldiğinde fare imlecini değiştirmek için kabarcık ve simge katmanlarına mouseover olayekleyin.mouseoutAdd mouseover and mouseout events to the bubble and icon layers to change the mouse cursor when the user hovers over a cluster or icon on the map. Küme kabarcık click katmanına bir olay ekleyin.Add a click event to the cluster bubble layer. Bu click olay Haritayı iki düzeyde büyütür ve Kullanıcı herhangi bir kümeyi seçtiğinde Haritayı bir küme üzerine ortalar.This click event zooms the map in two levels and centers the map over a cluster when the user selects any cluster. Simge katmanına click bir olay ekleyin.Add a click event to the icon layer. Bu click olay, Kullanıcı tek bir konum simgesi seçtiğinde bir kafeterin ayrıntılarını gösteren bir açılır pencere görüntüler.This click event displays a pop-up window that shows the details of a coffee shop when a user selects an individual location icon. Haritanın taşınması tamamlandığında izlemek üzere haritaya bir olay ekleyin.Add an event to the map to monitor when the map is finished moving. Bu olay tetiklendiğinde, liste panelindeki öğeleri güncelleştirin.When this event fires, update the items in the list panel.

    //Create a bubble layer to render clustered data points.
    var clusterBubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {
        radius: 12,
        color: '#007faa',
        strokeColor: 'white',
        strokeWidth: 2,
        filter: ['has', 'point_count'] //Only render data points that have a point_count property; clusters have this property.
    });
    
    //Create a symbol layer to render the count of locations in a cluster.
    var clusterLabelLayer = new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: 'none' //Hide the icon image.
        },
    
        textOptions: {
            textField: ['get', 'point_count_abbreviated'],
            size: 12,
            font: ['StandardFont-Bold'],
            offset: [0, 0.4],
            color: 'white'
        }
    });
    
    map.layers.add([clusterBubbleLayer, clusterLabelLayer]);
    
    //Load a custom image icon into the map resources.
    map.imageSprite.add('myCustomIcon', iconImageUrl).then(function() {
    
    //Create a layer to render a coffee cup symbol above each bubble for an individual location.
    iconLayer = new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            //Pass in the ID of the custom icon that was loaded into the map resources.
            image: 'myCustomIcon',
    
            //Optionally, scale the size of the icon.
            font: ['SegoeUi-Bold'],
    
            //Anchor the center of the icon image to the coordinate.
            anchor: 'center',
    
            //Allow the icons to overlap.
            allowOverlap: true
        },
    
        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
    });
    
    map.layers.add(iconLayer);
    
    //When the mouse is over the cluster and icon layers, change the cursor to a pointer.
    map.events.add('mouseover', [clusterBubbleLayer, iconLayer], function() {
        map.getCanvasContainer().style.cursor = 'pointer';
    });
    
    //When the mouse leaves the item on the cluster and icon layers, change the cursor back to the default (grab).
    map.events.add('mouseout', [clusterBubbleLayer, iconLayer], function() {
        map.getCanvasContainer().style.cursor = 'grab';
    });
    
    //Add a click event to the cluster layer. When the user selects a cluster, zoom into it by two levels.  
    map.events.add('click', clusterBubbleLayer, function(e) {
        map.setCamera({
            center: e.position,
            zoom: map.getCamera().zoom + 2
        });
    });
    
    //Add a click event to the icon layer and show the shape that was selected.
    map.events.add('click', iconLayer, function(e) {
        showPopup(e.shapes[0]);
    });
    
    //Add an event to monitor when the map is finished rendering the map after it has moved.
    map.events.add('render', function() {
        //Update the data in the list.
        updateListItems();
    });
    
  6. Kahve dükkanı veri kümesi yüklendiğinde, önce indirilmelidir.When the coffee shop dataset is loaded, it must first be downloaded. Sonra, metin dosyası çizgilere bölünmelidir.Then, the text file must be split into lines. İlk satır üst bilgi bilgilerini içerir.The first line contains the header information. Kodun izlenmesini kolaylaştırmak için üst bilgiyi bir nesnesine ayrıştırır, bu da daha sonra her bir özelliğin hücre dizinini aramak için kullanabiliriz.To make the code easier to follow, we parse the header into an object, which we can then use to look up the cell index of each property. İlk satırdan sonra, kalan satırlarda ilerleyin ve bir nokta özelliği oluşturun.After the first line, loop through the remaining lines and create a point feature. Point özelliğini veri kaynağına ekleyin.Add the point feature to the data source. Son olarak, liste panelini güncelleştirin.Finally, update the list panel.

    function loadStoreData() {
    
    //Download the store location data.
    fetch(storeLocationDataUrl)
        .then(response => response.text())
        .then(function(text) {
    
            //Parse the tab-delimited file data into GeoJSON features.
            var features = [];
    
            //Split the lines of the file.
            var lines = text.split('\n');
    
            //Grab the header row.
            var row = lines[0].split('\t');
    
            //Parse the header row and index each column to make the code for parsing each row easier to follow.
            var header = {};
            var numColumns = row.length;
            for (var i = 0; i < row.length; i++) {
                header[row[i]] = i;
            }
    
            //Skip the header row and then parse each row into a GeoJSON feature.
            for (var i = 1; i < lines.length; i++) {
                row = lines[i].split('\t');
    
                //Ensure that the row has the correct number of columns.
                if (row.length >= numColumns) {
    
                    features.push(new atlas.data.Feature(new atlas.data.Point([parseFloat(row[header['Longitude']]), parseFloat(row[header['Latitude']])]), {
                        AddressLine: row[header['AddressLine']],
                        City: row[header['City']],
                        Municipality: row[header['Municipality']],
                        AdminDivision: row[header['AdminDivision']],
                        Country: row[header['Country']],
                        PostCode: row[header['PostCode']],
                        Phone: row[header['Phone']],
                        StoreType: row[header['StoreType']],
                        IsWiFiHotSpot: (row[header['IsWiFiHotSpot']].toLowerCase() === 'true') ? true : false,
                        IsWheelchairAccessible: (row[header['IsWheelchairAccessible']].toLowerCase() === 'true') ? true : false,
                        Opens: parseInt(row[header['Opens']]),
                        Closes: parseInt(row[header['Closes']])
                    }));
                }
            }
    
            //Add the features to the data source.
            datasource.add(new atlas.data.FeatureCollection(features));
    
            //Initially, update the list items.
            updateListItems();
        });
    }
    
  7. Liste paneli güncelleştirilirken haritanın merkezinden uzaklığı geçerli harita görünümündeki tüm nokta özelliklerine göre hesaplanır.When the list panel is updated, the distance from the center of the map to all point features in the current map view is calculated. Özellikler daha sonra uzaklığına göre sıralanır.The features are then sorted by distance. Her konumu liste panelinde göstermek için HTML oluşturulur.HTML is generated to display each location in the list panel.

    var listItemTemplate = '<div class="listItem" onclick="itemSelected(\'{id}\')"><div class="listItem-title">{title}</div>{city}<br />Open until {closes}<br />{distance} miles away</div>';
    
    function updateListItems() {
        //Hide the center marker.
        centerMarker.setOptions({
            visible: false
        });
    
        //Get the current camera and view information for the map.
        var camera = map.getCamera();
        var listPanel = document.getElementById('listPanel');
    
        //Check to see whether the user is zoomed out a substantial distance. If they are, tell the user to zoom in and to perform a search or select the My Location button.
        if (camera.zoom < maxClusterZoomLevel) {
            //Close the pop-up window; clusters might be displayed on the map.  
            popup.close(); 
            listPanel.innerHTML = '<div class="statusMessage">Search for a location, zoom the map, or select the My Location button to see individual locations.</div>';
        } else {
            //Update the location of the centerMarker property.
            centerMarker.setOptions({
                position: camera.center,
                visible: true
            });
    
            //List the ten closest locations in the side panel.
            var html = [], properties;
    
            /*
            Generating HTML for each item that looks like this:
            <div class="listItem" onclick="itemSelected('id')">
                <div class="listItem-title">1 Microsoft Way</div>
                Redmond, WA 98052<br />
                Open until 9:00 PM<br />
                0.7 miles away
            </div>
            */
    
            //Get all the shapes that have been rendered in the bubble layer. 
            var data = map.layers.getRenderedShapes(map.getCamera().bounds, [iconLayer]);
    
            //Create an index of the distances of each shape.
            var distances = {};
    
            data.forEach(function (shape) {
                if (shape instanceof atlas.Shape) {
    
                    //Calculate the distance from the center of the map to each shape and store in the index. Round to 2 decimals.
                    distances[shape.getId()] = Math.round(atlas.math.getDistanceTo(camera.center, shape.getCoordinates(), 'miles') * 100) / 100;
                }
            });
    
            //Sort the data by distance.
            data.sort(function (x, y) {
                return distances[x.getId()] - distances[y.getId()];
            });
    
            data.forEach(function(shape) {
                properties = shape.getProperties();
                html.push('<div class="listItem" onclick="itemSelected(\'', shape.getId(), '\')"><div class="listItem-title">',
                properties['AddressLine'],
                '</div>',
                //Get a formatted addressLine2 value that consists of City, Municipality, AdminDivision, and PostCode.
                getAddressLine2(properties),
                '<br />',
    
                //Convert the closing time to a format that is easier to read.
                getOpenTillTime(properties),
                '<br />',
    
                //Get the distance of the shape.
                distances[shape.getId()],
                ' miles away</div>');
            });
    
            listPanel.innerHTML = html.join('');
    
            //Scroll to the top of the list panel in case the user has scrolled down.
            listPanel.scrollTop = 0;
        }
    }
    
    //This converts a time that's in a 24-hour format to an AM/PM time or noon/midnight string.
    function getOpenTillTime(properties) {
        var time = properties['Closes'];
        var t = time / 100;
        var sTime;
    
        if (time === 1200) {
            sTime = 'noon';
        } else if (time === 0 || time === 2400) {
            sTime = 'midnight';
        } else {
            sTime = Math.round(t) + ':';
    
            //Get the minutes.
            t = (t - Math.round(t)) * 100;
    
            if (t === 0) {
                sTime += '00';
            } else if (t < 10) {
                sTime += '0' + t;
            } else {
                sTime += Math.round(t);
            }
    
            if (time < 1200) {
                sTime += ' AM';
            } else {
                sTime += ' PM';
            }
        }
    
        return 'Open until ' + sTime;
    }
    
    //Create an addressLine2 string that contains City, Municipality, AdminDivision, and PostCode.
    function getAddressLine2(properties) {
        var html = [properties['City']];
    
        if (properties['Municipality']) {
            html.push(', ', properties['Municipality']);
        }
    
        if (properties['AdminDivision']) {
            html.push(', ', properties['AdminDivision']);
        }
    
        if (properties['PostCode']) {
            html.push(' ', properties['PostCode']);
        }
    
        return html.join('');
    }
    
  8. Kullanıcı liste panelinde bir öğe seçtiğinde, öğenin ilişkili olduğu şekil veri kaynağından alınır.When the user selects an item in the list panel, the shape to which the item is related is retrieved from the data source. Şeklin içinde depolanan Özellik bilgilerini temel alan bir açılır pencere oluşturulur.A pop-up window is generated that's based on the property information stored in the shape. Harita şeklin üzerine ortalanır.The map is centered over the shape. Eşleme 700 piksel genişliğinde değilse, harita görünümü, açılır pencere görünür olacak şekilde denkleştirilir.If the map is less than 700 pixels wide, the map view is offset so the pop-up window is visible.

    //When a user selects a result in the side panel, look up the shape by its ID value and display the pop-up window.
    function itemSelected(id) {
        //Get the shape from the data source by using its ID.  
        var shape = datasource.getShapeById(id);
        showPopup(shape);
    
        //Center the map over the shape on the map.
        var center = shape.getCoordinates();
        var offset;
    
        //If the map is less than 700 pixels wide, then the layout is set for small screens.
        if (map.getCanvas().width < 700) {
            //When the map is small, offset the center of the map relative to the shape so that there is room for the popup to appear.
            offset = [0, -80];
        }
    
        map.setCamera({
            center: center,
            centerOffset: offset
        });
    }
    
    function showPopup(shape) {
        var properties = shape.getProperties();
    
        /* Generating HTML for the pop-up window that looks like this:
    
            <div class="storePopup">
                <div class="popupTitle">
                    3159 Tongass Avenue
                    <div class="popupSubTitle">Ketchikan, AK 99901</div>
                </div>
                <div class="popupContent">
                    Open until 22:00 PM<br/>
                    <img title="Phone Icon" src="images/PhoneIcon.png">
                    <a href="tel:1-800-XXX-XXXX">1-800-XXX-XXXX</a>
                    <br>Amenities:
                    <img title="Wi-Fi Hotspot" src="images/WiFiIcon.png">
                    <img title="Wheelchair Accessible" src="images/WheelChair-small.png">
                </div>
            </div>
        */
    
         //Calculate the distance from the center of the map to the shape in miles, round to 2 decimals.
        var distance = Math.round(atlas.math.getDistanceTo(map.getCamera().center, shape.getCoordinates(), 'miles') * 100)/100;
    
        var html = ['<div class="storePopup">'];
        html.push('<div class="popupTitle">',
            properties['AddressLine'],
            '<div class="popupSubTitle">',
            getAddressLine2(properties),
            '</div></div><div class="popupContent">',
    
            //Convert the closing time to a format that's easier to read.
            getOpenTillTime(properties),
    
            //Add the distance information.  
            '<br/>', distance,
            ' miles away',
            '<br /><img src="images/PhoneIcon.png" title="Phone Icon"/><a href="tel:',
            properties['Phone'],
            '">',  
            properties['Phone'],
            '</a>'
        );
    
        if (properties['IsWiFiHotSpot'] || properties['IsWheelchairAccessible']) {
            html.push('<br/>Amenities: ');
    
            if (properties['IsWiFiHotSpot']) {
                html.push('<img src="images/WiFiIcon.png" title="Wi-Fi Hotspot"/>');
            }
    
            if (properties['IsWheelchairAccessible']) {
                html.push('<img src="images/WheelChair-small.png" title="Wheelchair Accessible"/>');
            }
        }
    
        html.push('</div></div>');
    
        //Update the content and position of the pop-up window for the specified shape information.
        popup.setOptions({
    
            //Create a table from the properties in the feature.
            content:  html.join(''),
            position: shape.getCoordinates()
        });
    
        //Open the pop-up window.
        popup.open(map);
    }
    

Artık tam işlevli bir depolama Konumlayıcı vardır.Now, you have a fully functional store locator. Bir Web tarayıcısında mağaza Bulucu için index. html dosyasını açın.In a web browser, open the index.html file for the store locator. Kümeler haritada görüntülendiğinde, arama kutusunu kullanarak, bir küme seçerek veya tek tek konumları görmek için haritada yakınlaştırarak bir konum araması yapabilirsiniz ' ı seçin.When the clusters appear on the map, you can search for a location by using the search box, by selecting the My Location button, by selecting a cluster, or by zooming in on the map to see individual locations.

Kullanıcı konumumu ilk kez seçtiğinde tarayıcı, kullanıcının konumuna erişmek için izin isteyen bir güvenlik uyarısı görüntüler.The first time a user selects the My Location button, the browser displays a security warning that asks for permission to access the user’s location. Kullanıcı konumunu paylaşmayı kabul ederse, harita kullanıcının konumuna yakınlaşarak yakın kafeterler gösterilir.If the user agrees to share their location, the map zooms in on the user's location, and nearby coffee shops are shown.


Tarayıcının kullanıcının konumuna erişim isteğinin ekran görüntüsü

Screenshot of the browser's request to access the user's location

Kahve dükterleri bulunan bir alanda yeterince yakından yakınlaştırdığınızda, kümeler tek tek konumlara ayrılır.When you zoom in close enough in an area that has coffee shop locations, the clusters separate into individual locations. Haritadaki simgelerden birini seçin veya yan bölmede bir öğe seçerek söz konusu konumun bilgilerini gösteren bir açılır pencere görüntüleyin.Select one of the icons on the map or select an item in the side panel to see a pop-up window that shows information for that location.


Tamamlanan mağaza bulucunun ekran görüntüsü

Screenshot of the finished store locator

Tarayıcı penceresini 700 piksel genişliğinde veya uygulamayı bir mobil cihazda açmak için yeniden boyutlandırırsanız, düzen daha küçük ekranlarda daha uygun olacak şekilde değişir.If you resize the browser window to less than 700 pixels wide or open the application on a mobile device, the layout changes to be better suited for smaller screens.


Mağaza Konumlandırıcı 'nın küçük ekran sürümünün ekran görüntüsü

Screenshot of the small-screen version of the store locator

Sonraki adımlarNext steps

Bu öğreticide, Azure haritalar 'ı kullanarak temel bir mağaza Konumlandırıcısı oluşturmayı öğreneceksiniz.In this tutorial, you learn how to create a basic store locator by using Azure Maps. Bu öğreticide oluşturduğunuz mağaza Bulucu, ihtiyacınız olan tüm işlevlere sahip olabilir.The store locator you create in this tutorial might have all the functionality you need. Mağaza bulucusinize özellikler ekleyebilir veya daha özel bir kullanıcı deneyimi için daha gelişmiş özellikler kullanabilirsiniz:You can add features to your store locator or use more advance features for a more custom user experience:

Azure Haritalar'ın kapsamı ve özellikleri hakkında daha fazla bilgi edinmek için:To learn more about the coverage and capabilities of Azure Maps:

Daha fazla kod örneği ve etkileşimli bir kodlama deneyimi için:To see more code examples and an interactive coding experience: