-1

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

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

4

3 に答える 3

0

Google マップを Web ページに挿入するには、Google Maps JavaScript APIを使用できます。したがって、db から緯度と経度がある場合は、これらのパラメーターを JS コードに挿入できます。

center = new google.maps.LatLng(-34.397, 150.644)
于 2013-01-29T09:22:45.613 に答える
0

1. DB から緯度と lan を取得するための cs 関数

public string propLat = "";
public string propLan = "";


public void getLatLan(int PropertyId)
{
    DataSet dstPropMap = Tbl_PropertyMaster.GetPropertyDetailsbyId(PropertyId);
    if (dstPropMap.Tables[0].Rows.Count > 0)
    {
        propLat = dstPropMap.Tables[0].Rows[0]["Latitude"].ToString().Trim();
        propLan = dstPropMap.Tables[0].Rows[0]["Longitude"].ToString().Trim();
    }
}

2. Google リンクを参照し、ID が「mapStreetView」の div を作成します

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
 <div id="mapStreetView" style="height:500px;width:340px"></div>

3. aspx ページの JS

  function initializeThisMap(lat,lan) {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(lat,lan),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('mapStreetView'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom in'
  });


  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(12);
    map.setCenter(marker.getPosition());
  });
}

4. JS 関数の呼び出し (aspx ページの下部にあるため、他の JS には影響しません)

<script type="text/javascript">
  initializeThisMap('<%= propLat %>','<%= propLan %>');
</script>
于 2013-01-29T09:24:19.293 に答える
0

ASPX ページに Google マップを追加する必要があります。たくさんの記事がありますが、次のようなものです。

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<div id="map" style="width: 356px; height: 566px;"></div>
<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(<%=SomeLatValue %>, <%=SomeLongValue%>),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

</script>

次に、バインドできる SomeLatValue および SomeLongValue という名前のクラス レベル プロパティが必要です (コードに示すように)。

于 2013-01-29T09:25:16.903 に答える