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',
...

Live demo at 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 个答案: