ASP.NET Web Sayfaları (Razor) Sitesinde Haritaları Görüntüleme

2023-07-13

Bu makalede, Bing, Google, MapQuest ve Yahoo tarafından sağlanan eşleme hizmetlerine dayalı olarak ASP.NET Web Sayfaları (Razor) web sitesindeki sayfalarda etkileşimli haritaların nasıl görüntüleneceği açıklanmaktadır.

Öğrenecekleriniz:

Adrese dayalı bir harita oluşturma.

Enlem ve boylam koordinatlarını temel alan bir harita oluşturma.

Bing Haritalar Geliştirici Hesabı kaydetme ve Bing Haritalar ile kullanmak için bir anahtar alma.

Bu, makalede sunulan ASP.NET özelliğidir:

Yardımcı Maps .

Öğreticide kullanılan yazılım sürümleri

ASP.NET Web Sayfaları (Razor) 2

WebMatrix 2

Bu öğretici, WebMatrix 3 ile de çalışır.

Web Sayfaları'nda, yardımcıyı kullanarak Maps bir sayfada haritaları görüntüleyebilirsiniz. Bir adrese veya boylam ve enlem koordinatları kümesine göre haritalar oluşturabilirsiniz. Maps sınıfı Bing, Google, MapQuest ve Yahoo gibi popüler harita altyapılarını çağırmanızı sağlar.

Bir sayfaya eşleme ekleme adımları, hangi eşleme altyapılarını çağırdığınızdan bağımsız olarak aynıdır. Eşlemeyi görüntülemek için kullanılabilir yöntemler sağlayan bir JavaScript dosya başvurusu eklemeniz ve ardından yardımcının Maps yöntemlerini çağırmanız gerekir.

Kullandığınız yardımcı yöntemi temel alan Maps bir harita hizmeti seçersiniz. Şunlardan herhangi birini kullanabilirsiniz:

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

İhtiyacınız Olan Parçaları Yükleme

Haritaları görüntülemek için şu parçalara ihtiyacınız vardır:

Yardımcı Maps . Bu yardımcı, ASP.NET Web Yardımcıları Kitaplığı'nın 2. sürümündedir. Kitaplığı henüz eklemediyseniz, sitenize NuGet paketi olarak yükleyebilirsiniz. Ayrıntılar için bkz . ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme. (Galeri'de paketi arayın microsoft-web-helpers .)
jQuery kitaplığı. WebMatrix site şablonlarının bazıları betik klasörlerine zaten jQuery kitaplıkları içerir. Bu kitaplıklara sahip değilseniz en son jQuery kitaplığını doğrudan jQuery.org sitesinden indirebilirsiniz. Alternatif olarak, şablon (örneğin, Başlangıç Sitesi şablonu) kullanarak yeni bir site oluşturabilir ve ardından jQuery dosyalarını bu siteden geçerli sitenize kopyalayabilirsiniz.

Son olarak, Bing haritalarını kullanmak istiyorsanız, önce bir (ücretsiz) hesap oluşturmanız ve bir anahtar almanız gerekir. Bir anahtar almak için şu adımları izleyin:

Bing Haritalar Geliştirici Hesabı'nda bir hesap oluşturun. Bir Microsoft hesabınız (Windows Live ID) de olmalıdır.

Değerlendirme/Test için anahtarı kullanmak istediğinizi belirtebilirsiniz. Eşleme işlevini WebMatrix ve IIS Express kullanarak kendi bilgisayarınızda test ediyorsanız, Site çalışma alanına gidin ve sitenizin URL'sini not edin (örneğin, http://localhost:50408bağlantı noktası numaranız büyük olasılıkla farklı olsa da). Kaydederken site olarak bu localhost adresini kullanabilirsiniz.
Bir hesaba kaydoldıktan sonra Bing Haritalar Hesap Merkezi'ne gidin ve Anahtarları oluştur veya görüntüle'ye tıklayın:
Bing'in oluşturduğu anahtarı kaydedin.

Adrese Dayalı Harita Oluşturma (Google'ı Kullanma)

Aşağıdaki örnekte, bir adrese göre haritayı işleyen bir sayfanın nasıl oluşturulacağı gösterilmektedir. Bu örnekte Google Haritalar'ın nasıl kullanılacağı gösterilmektedir.

Sitenin kökünde MapAddress.cshtml adlı bir dosya oluşturun. Bu sayfa, geçirdiğiniz adresi temel alan bir harita oluşturur.
Aşağıdaki kodu dosyaya kopyalayın ve var olan içeriğin üzerine yazın.
```
<!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:
- <script> öğesindeki <head> öğesi. Örnekte, <script> öğesi jQuery kitaplığının küçültüldü (sıkıştırılmış) sürümü olan 1.6.4 sürümü olan jquery-1.6.4.min.js dosyasına başvurur. Başvuruda ,.js dosyasının sitenizin Betikler klasöründe olduğu varsayılır.
  
  Not
  
  jQuery kitaplığının farklı bir sürümünü kullanıyorsanız, bu sürümü doğru işaret ettiğinizden emin olun.
- Sayfanın gövdesindeki öğesine yapılan çağrı @Maps.GetGoogleHtml . Bir adresi eşlemek için bir adres dizesi geçirmeniz gerekir. Diğer harita altyapılarının yöntemleri benzer şekilde çalışır (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).
Sayfayı çalıştırın ve bir adres girin. Sayfada, Belirttiğiniz konumu gösteren Google Haritalar'ı temel alan bir harita görüntülenir.

Enlem ve Boylam Koordinatlarına Dayalı Harita Oluşturma (Bing Kullanarak)

Bu örnekte koordinatları temel alan bir haritanın nasıl oluşturulacağı gösterilmektedir. Bu örnekte Bing haritalarının nasıl kullanılacağı ve Bing anahtarınızın nasıl dahil olduğu gösterilir. (Bing anahtarı kullanmadan diğer harita altyapılarını kullanarak koordinatları temel alan bir harita oluşturabilirsiniz.)

Sitenin kökünde MapCoordinates.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdaki kod ve işaretlemeyle değiştirin:

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

değerini, daha önce oluşturduğunuz Bing Haritalar anahtarıyla değiştirinyour-key-here.
MapCoordinates.cshtml sayfasını çalıştırın, enlem ve boylam koordinatları girin ve ardından Eşle! düğmesine tıklayın. (Herhangi bir koordinat bilmiyorsanız aşağıdakileri deneyin. Burası Microsoft Redmond kampüsünde bir konumdur.)
- Enlem: 47.6781005859375
- Boylam: -122.158317565918
  
  Sayfa, belirttiğiniz koordinatlar kullanılarak görüntülenir.

Ek Kaynaklar

Microsoft.Maps API Başvurusu

Aracılığıyla paylaş

ASP.NET Web Sayfaları (Razor) Sitesinde Haritaları Görüntüleme

Öğreticide kullanılan yazılım sürümleri

İhtiyacınız Olan Parçaları Yükleme

Adrese Dayalı Harita Oluşturma (Google'ı Kullanma)

Enlem ve Boylam Koordinatlarına Dayalı Harita Oluşturma (Bing Kullanarak)

Ek Kaynaklar

Geri Bildirim

Ek kaynaklar