0

私は ASP.Net プロジェクトに取り組んでいます。私はそれにリンクされたSQL Serverデータベースを持っています。このプロジェクトには、市内にあるホテルのリストがあります。ページには、グリッドビューにホテルのリストが表示されます。ホテルをクリックすると、そのホテルの詳細を示す別のページにリダイレクトされます。そのホテルのGoogleマップの写真やGoogleストリートの写真を、そのホテルの詳細ページに経度と緯度を介して詳細とともに表示したい。各ホテルの詳細はデータベースから取得されてそのページに表示され、各ホテルの経度と緯度の値もデータベースの列に保存されます。

データベースから取得した経度と緯度の値を参照して、Google マップの写真や Google ストリート ビューの写真を表示するにはどうすればよいですか?

4

2 に答える 2

2

jQueryとgooglemapsjavascriptAPIの簡単な例を次に示します。

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でのライブデモ。 晴れた日のビーチ…うーん！

于 2012-12-02T11:18:45.790 に答える
1 
<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-04T13:52:17.673 に答える