Haritaları bir ASP.NET Web Pages (Razor) sitesinde görüntülemeDisplaying Maps in an ASP.NET Web Pages (Razor) Site

Tom FitzMacken tarafındanby Tom FitzMacken

Bu makalede, ASP.NET Web Pages (Razor) Web sitesindeki sayfalarda, Bing, Google, Map ve Yahoo tarafından sunulan eşleme hizmetlerine bağlı olarak etkileşimli eşlemelerin nasıl görüntüleneceği açıklanır.This article explains how to display interactive maps on pages in an ASP.NET Web Pages (Razor) website based on mapping services provided by Bing, Google, MapQuest, and Yahoo.

Öğrenecekleriniz:What you'll learn:

  • Bir adrese göre harita oluşturma.How to generate a map based on an address.
  • Enlem ve boylam koordinatları temelinde harita oluşturma.How to generate a map based on latitude and longitude coordinates.
  • Bing Haritalar Geliştirici hesabını kaydetme ve Bing Haritalar ile kullanmak için bir anahtar alma.How to register a Bing Maps Developer Account and get a key to use with Bing Maps.

Bu, makalesinde sunulan ASP.NET özelliğidir:This is the ASP.NET feature introduced in the article:

  • Maps Yardımcısı.The Maps helper.

Öğreticide kullanılan yazılım sürümleriSoftware versions used in the tutorial

  • ASP.NET Web sayfaları (Razor) 2ASP.NET Web Pages (Razor) 2
  • WebMatrix 2WebMatrix 2

Bu öğretici WebMatrix 3 ile de kullanılabilir.This tutorial also works with WebMatrix 3.

Web sayfalarında, Maps Yardımcısı 'nı kullanarak bir sayfada haritaları görüntüleyebilirsiniz.In Web Pages, you can display maps on a page by using Maps helper. Bir adrese veya boylam ve enlem koordinatlarına göre haritalar oluşturabilirsiniz.You can generate maps based either on an address or on a set of longitude and latitude coordinates. Maps sınıfı Bing, Google, Mapınsize ve Yahoo gibi popüler harita altyapılarına çağrı yapmanızı sağlar.The Maps class lets you call into popular map engines including Bing, Google, MapQuest, and Yahoo.

Bir sayfaya eşleme eklemek için gereken adımlar, hangi harita altyapılarından bağımsız olarak çağrılacağını göz önüne alınır.The steps for adding mapping to a page are the same regardless of which of the map engines you call. Yalnızca Haritayı görüntülemesi için kullanılabilir yöntemler sağlayan bir JavaScript dosya başvurusu eklersiniz ve sonra Maps Yardımcısı yöntemlerini çağırabilirsiniz.You just add a JavaScript file reference that makes available methods to display the map, and then you call methods of the Maps helper.

Kullandığınız Maps yardımcı yöntemine göre bir harita hizmeti seçersiniz.You choose a map service based on which Maps helper method you use. Bunlardan herhangi birini kullanabilirsiniz:You can use any of these:

  • Maps.GetBingHtml
  • Maps.GetGoogleHtml
  • Maps.GetYahooHtml
  • Maps.GetMapQuestHtml

Ihtiyaç duyduğunuz parçaları yüklemeInstalling the Pieces You Need

Haritaları göstermek için şu parçalara ihtiyacınız vardır:To display maps, you need these pieces:

  • Maps Yardımcısı.The Maps helper. Bu yardımcı ASP.NET Web yardımcıları kitaplığı sürüm 2 ' dir.This helper is in version 2 of the ASP.NET Web Helpers Library. Kitaplığı henüz eklemediyseniz, sitenize bir NuGet paketi olarak yükleyebilirsiniz.If you haven't already added the library, you can install it in your site as a NuGet package. Ayrıntılar için bkz. ASP.NET Web Pages sitesinde yardımcıları yükleme.For details, see Installing Helpers in an ASP.NET Web Pages Site. (Galeride microsoft-web-helpers paketini arayın.)(In the Gallery, search for the microsoft-web-helpers package.)
  • JQuery kitaplığı.The jQuery library. Birçok WebMatrix site şablonu, kendi betik klasörlerinde jQuery kitaplıklarını zaten içeriyor.Several of the WebMatrix site templates already include jQuery libraries in their Script folders. Bu kitaplıklara sahip değilseniz, en son jQuery kitaplığını doğrudan jQuery.org sitesinden indirebilirsiniz.If you do not have these libraries, you can download the latest jQuery library directly from the jQuery.org site. Ya da bir şablon (örneğin, Başlatıcı site şablonu) kullanarak yeni bir site oluşturabilir ve ardından bu sitedeki jQuery dosyalarını geçerli sitenize kopyalayabilirsiniz.Or you can create a new site using a template (for example, the Starter Site template) and then copy the jQuery files from that site to your current site.

Son olarak, Bing Haritalar 'ı kullanmak istiyorsanız, önce bir (ücretsiz) hesap oluşturmanız ve bir anahtar almanız gerekir.Finally, if you want to use Bing maps, you must first create a (free) account and get a key. Bir anahtar almak için aşağıdaki adımları izleyin:To get a key, follow these steps:

  1. Bing Haritalar Geliştirici hesabındabir hesap oluşturun.Create an account on the Bing Maps Developer Account. Bir Microsoft hesabı (Windows Live ID) de olmalıdır.You must have a Microsoft account (Windows Live ID) as well.

    Değerlendirme/testiçin anahtarı kullanmak istediğinizi belirtebilirsiniz.You can specify that you want to use the key for Evaluation/Test. Kendi bilgisayarınızda WebMatrix ve IIS Express kullanarak eşleme işlevini test ediyorsanız, site çalışma alanına gidin ve sitenizin URL 'sini (örneğin http://localhost:50408, bağlantı noktası numaranız farklı olsa da) göz önünde bulabilirsiniz.If you are testing the mapping function on your own computer using WebMatrix and IIS Express, go the Site workspace and note the URL of your site (for example, http://localhost:50408, although your port number will probably be different). Kayıt sırasında bu localhost adresini site olarak kullanabilirsiniz.You can use this localhost address as the site when you register.

  2. Bir hesap için kaydolduktan sonra Bing Haritalar hesap Merkezi ' ne gidin ve anahtar oluştur veya görüntüle' ye tıklayın:After you have registered for an account, go to the Bing Maps Account Center and click Create or view keys:

    eşleme-2

  3. Bing tarafından oluşturulan anahtarı kaydedin.Record the key that Bing creates.

Bir adrese göre harita oluşturma (Google kullanarak)Creating a Map Based on an Address (Using Google)

Aşağıdaki örnek, bir adresi temel alarak Haritayı işleyen bir sayfanın nasıl oluşturulacağını gösterir.The following example shows how to create a page that renders a map based on an address. Bu örnek, Google Maps 'ın nasıl kullanılacağını gösterir.This example shows how to use Google Maps.

  1. Sitenin kökünde Mapaddress. cshtml adlı bir dosya oluşturun.Create a file named MapAddress.cshtml in the root of the site. Bu sayfa, kendisine geçirdiğiniz bir adresi temel alan bir harita oluşturur.This page will generate a map based on an address that you pass to it.

  2. Aşağıdaki kodu, var olan içeriğin üzerine yazarak dosyaya kopyalayın.Copy the following code into the file, overwriting the existing content.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Map an Address</title>
      <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <h1>Map an Address</h1>
        <form method="post">
            <fieldset>
              <div>
                <label for="address">Address:</label>
                <input style="width: 300px" type="text" name="address" value="@Request["address"]"/>
                <input type="submit" value="Map It!" />
               </div>
            </fieldset>
        </form>
        @if(IsPost) {
            @Maps.GetGoogleHtml(Request.Form["address"],
                width: "400",
                height: "400")
        }
    </body>
    </html>
    

    Sayfanın aşağıdaki özelliklerine dikkat edin:Notice the following features of the page:

    • <head> öğesindeki <script> öğesi.The <script> element in the <head> element. Örnekte <script> öğesi, jQuery kitaplığı, sürüm 1.6.4 'in küçültülmüş (sıkıştırılmış) bir sürümü olan jQuery-1.6.4. min. js dosyasına başvurur.In the example, the <script> element references the jquery-1.6.4.min.js file, which is a minified (compressed) version of the jQuery library, version 1.6.4. Başvurunun . js dosyasının sitenizin betikler klasöründe olduğunu varsaydığını unutmayın.Note that the reference assumes that the .js file is in the Scripts folder of your site.

      Note

      JQuery kitaplığı 'nın farklı bir sürümünü kullanıyorsanız, bu sürüme doğru şekilde işaret ettiğinizden emin olun.If you're using a different version of the jQuery library, just make sure that you're pointing to that version correctly.

    • Sayfanın gövdesinde @Maps.GetGoogleHtml çağrısı.The call to the @Maps.GetGoogleHtml in the body of the page. Bir adresi eşlemek için bir adres dizesi geçirmeniz gerekir.To map an address, you must pass an address string. Diğer harita motorları için yöntemler benzer bir şekilde çalışır (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).The methods for the other map engines work in a similar way (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

  3. Sayfayı çalıştırın ve bir adres girin.Run the page and enter an address. Sayfada, belirttiğiniz konumu gösteren Google Maps temelinde bir harita görüntülenir.The page displays a map, based on Google Maps, that shows the location that you specified.

    eşleme-1

Enlem ve boylam koordinatları temelinde harita oluşturma (Bing kullanarak)Creating a Map Based on Latitude and Longitude Coordinates (Using Bing)

Bu örnek, koordinatları temel alarak bir haritanın nasıl oluşturulacağını gösterir.This example shows how to create a map based on coordinates. Bu örnek, Bing Haritalar 'ın nasıl kullanılacağını ve Bing anahtarınızı nasıl ekleneceğini gösterir.This example shows how to use Bing maps and how to include your Bing key. (Bing anahtar kullanmadan diğer eşleme altyapılarını kullanarak koordinatları temel alan bir harita oluşturabilirsiniz.)(You can create a map based on coordinates using the other map engines also, without using a Bing key.)

  1. Sitesinin kökünde Mapkoordinatlar. cshtml adlı bir dosya oluşturun ve var olan içeriği şu kod ve biçimlendirmeyle değiştirin:Create a file named MapCoordinates.cshtml in the root of the site and replace the existing content with the following code and markup:

    <!DOCTYPE html>
    <html lang="en"><head>
      <title>Map Coordinates</title>
      <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    </head>
    <body>
      <h1>Map Coordinates</h1>
      <form method="post">
        <fieldset>
        <div>
          <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
            <input type="text" name="latitude" value="@Request["latitude"]"/>
        </div>
        <div>
          <label for="longitude">Longitude:</label>
          <input type="text" name="longitude" value="@Request["longitude"]"/>
        </div>
        <div>
          <input type="submit" value="Map It!" />
        </div>
        </fieldset>
      </form>
      @if(IsPost) {
          @Maps.GetBingHtml(key: "your-key-here",
              latitude: Request["latitude"],
              longitude: Request["longitude"],
              width: "300",
              height: "300"
           )
        }
    </body>
    </html>
    
  2. your-key-here, daha önce oluşturduğunuz Bing Haritalar anahtarıyla değiştirin.Replace your-key-here with the Bing Maps key that you generated earlier.

  3. Mapkoordinatlar. cshtml sayfasını çalıştırın, enlem ve boylam koordinatlarını girin ve ardından haritaya tıklayın!Run the MapCoordinates.cshtml page, enter latitude and longitude coordinates, and then click the Map It! tıklayın.button. (Herhangi bir koordinat bilmiyorsanız, aşağıdakileri deneyin.(If you don't know any coordinates, try the following. Bu, Microsoft Redmond kampüs üzerinde bir konumdur.)This is a location on the Microsoft Redmond campus.)

    • Enlem: 47.6781005859375Latitude: 47.6781005859375

    • Boylam:-122.158317565918Longitude: -122.158317565918

      Sayfa, belirttiğiniz koordinatlar kullanılarak görüntülenir.The page is displayed using the coordinates that you specified.

      eşleme-3

Ek KaynaklarAdditional Resources

Microsoft. Maps API başvurusuMicrosoft.Maps API Reference