2010-11-01 86 views
1

我想在我的頁面中實現Google地圖。在我的頁面中有一個文本框和一個按鈕。用戶需要輸入他想要擁有地圖的位置。然後點擊按鈕地圖應該出現在div中。如何在我的頁面中使用C#實現Google地圖

任何人都可以提供我這樣做的牛排嗎?

在此先感謝。

+1

你確定你的意思是C#,在我看來你想在客戶端使用Javascript來做到這一點? – 2010-11-01 09:33:14

回答

4

這是很容易,如果你使用谷歌API的js文件。作爲一個參考,你可以使用這個鏈接: http://code.google.com/apis/maps/documentation/javascript/reference.html

  1. 加入jQuery和谷歌地圖API庫中頭部分:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    
  2. 添加新的標籤來創建的谷歌地圖在div對象:

    var geocoder; 
    var map; 
    $(document).ready(function() { 
        /* Create the geocoder */ 
        geocoder = new google.maps.Geocoder(); 
        /* Some initial data for the map */ 
        mapOptions = { 
         zoom: 10, 
         center: new google.maps.LatLng(48.13, 13.58), 
         mapTypeId: google.maps.MapTypeId.TERRAIN 
        }; 
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    }; 
    
  3. 添加上單擊處理程序的按鈕:

    $('#idMyButton').click(function() { 
        if (geocoder) { 
         var address = $('#idMyTextbox').val(); 
         geocoder.geocode({ 'address': address}, function(results, status) { 
          if (status == google.maps.GeocoderStatus.OK) { 
           /* Position the map */ 
           map.panTo(results[0].geometry.location); 
           /* Put a marker */ 
           new google.maps.Marker({ 
            map: map, 
            position: results[0].geometry.location, 
            title: address, 
          }); 
         } 
         else 
          alert('Address not found'); 
         }; 
        } 
    }); 
    

我希望這會有所幫助。