Menampilkan Peta di Situs Halaman Web (Razor) ASP.NET

2023-07-13

Artikel ini menjelaskan cara menampilkan peta interaktif pada halaman di situs web ASP.NET Web Pages (Razor) berdasarkan layanan pemetaan yang disediakan oleh Bing, Google, MapQuest, dan Yahoo.

Yang akan Anda pelajari:

Cara membuat peta berdasarkan alamat.

Cara menghasilkan peta berdasarkan koordinat lintang dan bujur.

Cara mendaftarkan Akun Pengembang Bing Maps dan mendapatkan kunci untuk digunakan dengan Bing Maps.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

Pembantunya Maps .

Versi perangkat lunak yang digunakan dalam tutorial

Halaman Web ASP.NET (Razor) 2

WebMatrix 2

Tutorial ini juga berfungsi dengan WebMatrix 3.

Di Halaman Web, Anda bisa menampilkan peta pada halaman dengan menggunakan Maps pembantu. Anda dapat membuat peta berdasarkan alamat atau pada satu set koordinat bujur dan lintang. Kelas ini Maps memungkinkan Anda memanggil mesin peta populer termasuk Bing, Google, MapQuest, dan Yahoo.

Langkah-langkah untuk menambahkan pemetaan ke halaman sama terlepas dari mesin peta mana yang Anda panggil. Anda cukup menambahkan referensi file JavaScript yang menyediakan metode untuk menampilkan peta, lalu Anda memanggil metode pembantu Maps .

Anda memilih layanan peta berdasarkan metode pembantu mana yang Maps Anda gunakan. Anda dapat menggunakan salah satu dari berikut ini:

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

Menginstal Potongan yang Anda Butuhkan

Untuk menampilkan peta, Anda memerlukan potongan-potongan ini:

Pembantunya Maps . Pembantu ini berada di versi 2 dari Pustaka Pembantu Web ASP.NET. Jika Anda belum menambahkan pustaka, Anda dapat menginstalnya di situs Anda sebagai paket NuGet. Untuk detailnya, lihat Menginstal Pembantu di Situs Halaman Web ASP.NET. (Di Galeri, cari paket. microsoft-web-helpers )
Pustaka jQuery. Beberapa templat situs WebMatrix sudah menyertakan pustaka jQuery di folder Skrip mereka. Jika Anda tidak memiliki pustaka ini, Anda dapat mengunduh pustaka jQuery terbaru langsung dari situs jQuery.org . Atau Anda bisa membuat situs baru menggunakan templat (misalnya, templat Situs Pemula ) lalu menyalin file jQuery dari situs tersebut ke situs Anda saat ini.

Terakhir, jika Anda ingin menggunakan peta Bing, Anda harus terlebih dahulu membuat akun (gratis) dan mendapatkan kunci. Untuk mendapatkan kunci, ikuti langkah-langkah berikut:

Buat akun di Akun Pengembang Bing Maps. Anda juga harus memiliki akun Microsoft (Windows Live ID).

Anda dapat menentukan bahwa Anda ingin menggunakan kunci untuk Evaluasi/Pengujian. Jika Anda menguji fungsi pemetaan di komputer Anda sendiri menggunakan WebMatrix dan IIS Express, buka ruang kerja Situs dan catat URL situs Anda (misalnya, http://localhost:50408, meskipun nomor port Anda mungkin akan berbeda). Anda dapat menggunakan alamat localhost ini sebagai situs ketika Anda mendaftar.
Setelah Anda mendaftar untuk akun, buka Pusat Akun Bing Maps dan klik Buat atau lihat kunci:
Rekam kunci yang dibuat Bing.

Membuat Peta Berdasarkan Alamat (Menggunakan Google)

Contoh berikut menunjukkan cara membuat halaman yang merender peta berdasarkan alamat. Contoh ini menunjukkan cara menggunakan Google Maps.

Buat file bernama MapAddress.cshtml di akar situs. Halaman ini akan menghasilkan peta berdasarkan alamat yang Anda teruskan ke dalamnya.
Salin kode berikut ke dalam file, menimpa konten yang ada.
```
<!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>
```
Perhatikan fitur halaman berikut:
- Elemen <script> dalam <head> elemen . Dalam contoh, elemen mereferensikan <script> file jquery-1.6.4.min.js , yang merupakan versi minifikasi (terkompresi) dari pustaka jQuery, versi 1.6.4. Perhatikan bahwa referensi mengasumsikan bahwa file .js ada di folder Skrip situs Anda.
  
  Catatan
  
  Jika Anda menggunakan versi pustaka jQuery yang berbeda, pastikan Anda mengarahkan ke versi tersebut dengan benar.
- Panggilan ke @Maps.GetGoogleHtml di isi halaman. Untuk memetakan alamat, Anda harus meneruskan string alamat. Metode untuk mesin peta lainnya bekerja dengan cara yang sama (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).
Jalankan halaman dan masukkan alamat. Halaman menampilkan peta, berdasarkan Google Maps, yang menampilkan lokasi yang Anda tentukan.

Membuat Peta Berdasarkan Koordinat Lintang dan Bujur (Menggunakan Bing)

Contoh ini menunjukkan cara membuat peta berdasarkan koordinat. Contoh ini menunjukkan cara menggunakan peta Bing dan cara menyertakan kunci Bing Anda. (Anda dapat membuat peta berdasarkan koordinat menggunakan mesin peta lain juga, tanpa menggunakan kunci Bing.)

Buat file bernama MapCoordinates.cshtml di akar situs dan ganti konten yang ada dengan kode dan markup berikut:

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

Ganti your-key-here dengan kunci Bing Maps yang Anda buat sebelumnya.
Jalankan halaman MapCoordinates.cshtml, masukkan koordinat lintang dan bujur, lalu klik tombol Petakan! . (Jika Anda tidak tahu koordinat apa pun, cobalah yang berikut ini. Ini adalah lokasi di kampus Microsoft Redmond.)
- Garis lintang: 47.6781005859375
- Garis bujur: -122.158317565918
  
  Halaman ditampilkan menggunakan koordinat yang Anda tentukan.

Sumber Daya Tambahan

Referensi API Microsoft.Maps

Bagikan melalui

Menampilkan Peta di Situs Halaman Web (Razor) ASP.NET

Versi perangkat lunak yang digunakan dalam tutorial

Menginstal Potongan yang Anda Butuhkan

Membuat Peta Berdasarkan Alamat (Menggunakan Google)

Membuat Peta Berdasarkan Koordinat Lintang dan Bujur (Menggunakan Bing)

Sumber Daya Tambahan

Saran dan Komentar

Sumber Daya Tambahan: