0

私はグーグルマップAPIv3を学んでいます。このコードをまとめることができました。できるだけシンプルにしようと思いました。できます...

私が抱えている問題は、ストリートビューマップが正しい方向/住所を指していないことです。右側の建物は角にある黄色い建物です（ストリートビューを左に数回スクロールする必要があります）。

グーグルマップでまったく同じコードを使用すると、正しい建物/住所を指します。私の地図のストリートビューは反対側/建物を指しています。

  • 指定されたコード内で、ストリートビューマップが指す方向を制御する方法はありますか？-北/南/西...など
  • また、アドレスを使用して、google apiにlatLongを計算させることは可能ですか？-300を超えるアドレスに適切な座標を見つけて見つけるのは効率的ではなく、> _ <

私のコードはmysqlデータベースに格納されているLatLonを使用していますが、この例では、単一のポイントを使用してケースを作成しています。

Googleマップのコード：street_view.js

//<![CDATA[
// ************************   Variables   ************************
var infoWindow = new google.maps.InfoWindow();

//Map Options
var options = {
    lat: 34.028339,
    lon: -118.2881768,
    zoom: 15,
    type: 'roadmap',
    tytle: "Address: 1256 W. 29th St. Los Angeles, CA  90007",
    html: '<div class="tooltip"><span>Address</span>: 1256 W. 29th St. Los Angeles, CA  90007<\/div>',
    icons: {
        red:  'http://labs.google.com/ridefinder/images/mm_20_red.png',
        blue: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
        shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
        }
    };



// ************************   Functions   ************************
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        //marker.openInfoWindowHtml(html);
        infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
    });
}


function googleMaps()
{
    var map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng( options.lat , options.lon ),
        zoom: options.zoom,
        mapTypeId: options.type
    });

    var marker = new google.maps.Marker({
        map: map,
        position: map.getCenter(),
        title: options.title,
        icon: options.icons.blue,
        shadow: options.icons.shadow
        });

    bindInfoWindow(marker, map, infoWindow, options.html);


    map.StreetView = new  google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
        position: map.getCenter(),
        zoom: 1
    });
    //map.setStreetView(map.StreetView); //This line adds a street view icon to the roadmap and binds it together with streetView


} //end of load()


// ************************   Load   ************************
//Call googleMaps after document is loaded
google.maps.event.addDomListener(window, 'load', function(){
    googleMaps();
    //you can add more code here
    });
//]]>

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title><?php echo $map['address']?></title>

    <!-- START: Google Maps API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.mydomain.com/_api/google/maps/v3/street_view.js"></script>
    <!-- __END: Google Maps API -->
</head>


<body>
    <div id="map-container" >
        <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
        <div id="map" style="width: 350px; height: 250px"></div>
    </div>
</body>
</html>

PS。jsFiddleを渡そうとしましたが、どういうわけか地図が表示されていません...？http://jsfiddle.net/EdsB6/

4

1 に答える 1

2

まず、 StreetViewPanorama の初期化時にpovオプションでカメラ位置を設定します。

map.StreetView = new google.maps.StreetViewPanorama
  (document.getElementById("map_StreetView"), {
    position: map.getCenter(),
    pov: { heading: 135, pitch: 0, zoom: 1 }
});

更新された JS Fiddle: http://jsfiddle.net/EdsB6/2/

詳しくは、ストリートビューのドキュメントをご覧ください

https://developers.google.com/maps/documentation/javascript/streetview

2 番目の質問については、ジオコーディングが必要です。(残念ながら、いいえ、API でアドレスを使用する「簡単な」1 行の方法はありません)。同じ場所を繰り返しクエリしている場合は、一度実行して LatLngs を保存することをお勧めします。ここを読む：

https://developers.google.com/maps/documentation/javascript/geocoding

この回答は、住所を LatLng に変換する方法を示しています。実際には配列ですが、各住所は 1 つずつ変換されます。

https://stackoverflow.com/a/10743457/1325290

  function codeAddress(address, callback) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        callback(results[0].geometry.location);
      } 
    });
  }

  function initialize() {
    codeAddress("Chicago, IL", function(default_location) {
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        { center: default_location,
        zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP });

      locations = ["Los Angeles", "Davis", "Truth or Consequences",
        "Ann Arbor", "Massachusetts"];

      for (var i = 0; i < locations.length; i++) {
        codeAddress(locations[i], function(latLng) {
          new google.maps.Marker({map:map, position:latLng});
        });
      }
    });
  }
于 2012-05-24T22:20:05.597 に答える