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

Question

我正在研究ASP.Net項目。 我有與其鏈接的SQL Server數據庫。 該項目列出了該市現有的酒店。 頁面將在gridview上顯示酒店列表。 單擊旅館將重定向到另一個頁面，該頁面顯示該旅館的詳細信息。 我想通過經度和緯度在該酒店詳細信息頁面上顯示該酒店的Google地圖圖片或Google街道圖片。 每個酒店的詳細信息將從數據庫中獲取並顯示在該頁面上，每個酒店的經度和緯度值也保存在數據庫的一列中。

如何參考來自數據庫的經度和緯度值顯示Google地圖圖片或Google街景圖片？

Answer 1

這是一個使用jQuery和google maps 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',
...

JSFiddle上的現場演示。 陽光明媚的海灘...好吃！

Answer 2

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

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

問題描述

2 個解決方案

解決方案1
2 已采納 2012-12-02 11:18:45

解決方案2
1 2014-11-04 13:52:17

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

問題描述

2 個解決方案

解決方案1 2 已采納 2012-12-02 11:18:45

解決方案2 1 2014-11-04 13:52:17

解決方案1
2 已采納 2012-12-02 11:18:45

解決方案2
1 2014-11-04 13:52:17