如何以經度和緯度以編程方式顯示Google地圖

我正在開發一個ASP.Net項目。我有SQL Server數據庫與它連接。該項目有該城市的酒店列表。一個頁面將顯示gridview上的酒店列表。點擊酒店將重定向到另一個顯示該酒店詳情的頁面。我想通過經度和緯度顯示該酒店的Google地圖圖片或Google街道圖片以及該酒店詳細信息頁面上的詳細信息。每個酒店的詳細信息將從數據庫中提取以顯示在該頁面上，並且每個酒店的經度和緯度值也保存在數據庫的一列中。如何以經度和緯度以編程方式顯示Google地圖

如何顯示谷歌地圖圖片或谷歌街景圖片，參照已經從數據庫中傳來，經度和緯度值？

來源

2012-12-02 sohaiby

如何從這裏開始：https：//developers.google.com/maps/documentation/javascript/examples/ – Aristos

這裏有一個簡單的例子，用jQuery和谷歌地圖的JavaScript API：

var map = new google.maps.Map(
    $('#map')[0], 
    { 
     zoom: 50, 
     center: new google.maps.LatLng(52.250486, 4.432766), 
     mapTypeId: 'terrain', 
     streetViewControl: true 
    } 
); 

map.StreetView = new google.maps.StreetViewPanorama(
    $('#map')[0], 
    { 
     position: map.getCenter(), 
     pov: { heading: 0, pitch: 0, zoom: 1 
    } 
});

取而代之的是硬編碼的緯度和經度，你會使用這樣的事情在你的ASP.NET .aspx文件：

... 
zoom: 50, 
center: new google.maps.LatLng(
    <%= string.Format(CultureInfo.InvariantCulture.NumberFormat, 
     "{0:0.0000}", YourLatitude) %>, 
    <%= string.Format(CultureInfo.InvariantCulture.NumberFormat, 
     "{0:0.0000}", YourLongitude) %>), 
mapTypeId: 'terrain', 
...

Live demo at JSFiddle.海濱陽光明媚的日子...味道好極了！

來源

2012-12-02 11:18:45 Andomar

<html> 
<head> 
    <title>Google Map Integration</title>  
</head> 
<body> 

    <div> 

     <!-- Google Map [Div]--> 
     <div id="googleMap" style="width:auto; height:800px;"></div> 
     <!-- END: Google Map [Div]--> 

    </div> 

    <!--Google Map--> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 

     //Load Google-Map on [Page-Load] 
     google.maps.event.addDomListener(window, 'load', resetMap()); 

     function resetMap() {    

      //Google-Map DefaultPosition 
      var defaultPostion = new google.maps.LatLng(0, 0); 

      //Set Google-Map properties: 
      var mapProperties = { 
       center: defaultPostion, 
       zoom: 2, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      //Load Google-Map on "googleMap" [div] 
      var map = new google.maps.Map(document.getElementById("googleMap"), mapProperties); 

      var locations = [ 
           ['Tool Tip: Dubai', 25.10789521446838, 55.1819798029785, '<div><p>Dubai is the most populous city and emirate in the United Arab Emirates (UAE), and the second largest emirate by territorial size after the capital, Abu Dhabi. Dubai is located on the southeast coast of the Persian Gulf and is one of the seven emirates that make up the country.</p></div>'], 
           ['Tool Tip: Houston', 29.9928829, -95.4859515, '<div><p>Houston is the most populous city in Texas and the fourth most populous city in the United States. According to the 2012 U.S. Census estimates, the city had a population of 2.16 million people within a land area of 599.6 square miles.</p></div>'], 
           ['Tool Tip: London', 51.51121389999999, -0.11982439999997041, '<div><p>London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom with a metropolitan area of over 13 million inhabitants.</p></div>'], 
           ['Tool Tip: Riyadh', 24.7116667, 46.72416670000007, '<div><p>Riyadh is the capital and largest city of Saudi Arabia. It is also the capital of Riyadh Province, and belongs to the historical regions of Najd and Al-Yamama.</p></div>'], 
           ['Tool Tip: Karachi', 24.872769, 67.091738, '<div><p>Karachi is capital of Sindh as well as the largest and most populous metropolitan city of Pakistan and its main seaport and financial centre of the country.</p></div>'] 
          ]; 

      for (i = 0; i < locations.length; i++) { 

       var currentToolTip = locations[i][0] 
       var currentLatitude = locations[i][1] 
       var currentLongitude = locations[i][2] 
       var currentContent = locations[i][3] 

       var currentPostion = new google.maps.LatLng(currentLatitude, currentLongitude); 

       //Add the [Marker] in Google-Map 
       var marker = new google.maps.Marker({ 
        position: currentPostion, 
        map: map, 
        title: currentToolTip 
       }); 

       //Initialize [Info Window] for each [Marker] 
       var infoWindow = new google.maps.InfoWindow(); 

       //Add Listener for [Marker] "click" 
     google.maps.event.addListener(marker,'click', (function(marker,currentContent){ 
       return function() { 
        infoWindow.setContent(currentContent); 
        infoWindow.open(map,marker); 
      }; 
     })(marker,currentContent)); 


      } 
     } 
    </script> 
    <!--END: Google Map-->  

</body> 
</html>

來源

2014-11-04 13:52:17 Sami

如何以經度和緯度以編程方式顯示Google地圖

回答

相關問題