none
MS Knowledge Base: Bagaimana cara mencantumkan Bing Maps pada halaman ASP.NET? RRS feed

  • Diskusi Umum

  • Artikel ini menjelaskan tentang sampel All-In-One Code Framework yang tersedia untuk di-download. Sampel kode ini menjelaskan bagaimana cara untuk mencantumkan Bing Maps pada halaman ASP.NET.

     

    Tingkat Kesulitan

                Menengah

    Pembahasan Teknis

    Terkadang anda mungkin perlu untuk mencantumkan peta di halaman web Anda untuk menunjukkan lokasi dimana anda berada. Anda mungkin tidak hanya ingin peta itu berbentuk sebuah gambar, tetapi sesuatu yang dapat anda pindahkan, perbesar, atau perkecil untuk melihat lokasi disekelilingnya. Untuk melakukannya, anda dapat menggunakan AJAX Bing Maps API.

    Kontrol peta di Bing Maps API adalah kontrol JavaScript yang berisi beberapa objek, met
    ode, dan event. Kontrol JavaScript memungkinkan Anda untuk menampilkan peta yang didukung oleh Bing Maps di website. Anda bisa mendapatkan informasi lebih lanjut tentang kontrol JavaScript dengan mencari kata kunci "VEMap Class".

    Jika
    anda ingin membuat peta untuk penggunaan komersial, anda mungkin perlu menggunakan Bing Maps Account Center untuk mendaftarkan aplikasi anda. Bila anda mendaftarkan aplikasi anda, anda akan menerima Bing Maps Key yang dapat Anda gunakan untuk meloading Bing Maps AJAX Control. Bing Maps akan melacak penggunaan anda pada Bing Maps API, dan menyediakan laporan penggunaan pada Bing Maps Account Center.

     

    Pembahasan Sampel

    Sampel kode ini hanya berisi satu halaman tanpa code behind. Ada dua bagian utama di halaman Default.aspx. Satu bagian berisi beberapa fungsi JavaScript, dan bagian lain berisi kode HTML untuk page layout dan kontrol input.

    Catatan Anda dapat menemukan halaman Default.aspx di Visual Studio IDE.

    Untuk me
    cantumkan peta Bing Maps di halaman, ikuti langkah berikut:


    1. Masukkan kode berikut untuk menambahkan sebuah kontrol Panel pada halaman. Nama dari kontrol Panel adalah pnlMap.

      <asp:Panel ID="pnlMap" runat="server" style="position:absolute; width:400px; height:300px;" />

    2. Masukkan kode berikut untuk menambahkan referensi JavaScript untuk kontrol peta ke bagian header.

     <script type="text/javascript"src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3">
     </script>
     

    3. Masukkan kode berikut untuk memanggil fungsi JaveScript untuk memuat peta saat halaman sedang diloading.

     <script type="text/javascript">
              function LoadMap() {
              // Create a new instance of the VEMap Class
              // pnlMap is the ID of the Panel
              var map = new VEMap('pnlMap');
              // Call the VEMap.LoadMap method to load the map
              map.LoadMap();
           }
     </script> 
     <body onload="LoadMap();">
     

    4. Saat anda browsing halaman web, sebuah peta dasar akan ditampilkan.

     

    Untuk mengaktifkan lebih banyak kontrol untuk peta, anda dapat menggunakan beberapa kontrol seperti text box dan drop-down list. Berdasarkan pada input values dalam kontrol, Anda dapat memanggil fungsi berikut JavaScript untuk mengubah peta.

    function FindLoc() {

              var loc = document.getElementById("txtLocation").value;

              try {

    map.Find(null, loc);

              } catch (e) {

    alert(e.message);

              }

    }

     

    Kategori Teknologi

     

    ·   Microsoft ASP.NET 2.0

    ·   Microsoft ASP.NET 3.5

    ·   Microsoft ASP.NET 4.0

     

    Bahasa Pemograman

    Contoh kode ini memuat bahasa pemograman dibawah ini:

     

    Language

    Project Name

    Visual C#

    CSASPNETBingMaps

    Visual Basic.NET

    VASPNETBingMaps

     

    Prasyarat

     

    Untuk menjalankan sampel kode, anda harus memastikan Visual Studio 2010 dan .NET Framework 4 sudah terinstall dalam komputer anda.

     

    Referensi

     

    http://support.microsoft.com/kb/2494266/en-us


    Agnes Sannie [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Rabu, 06 April 2011 03.45
    Moderator