2014-06-15 96 views
0

JS小提琴:http://jsfiddle.net/SULSV/谷歌地圖API:添加街景地圖?

我用下面的代碼顯示在我的網站地圖:

我的HTML:

<div id="myMap" style="height:350px;width:680px"></div> 
<input id="address" type="text" style="width:600px;"/> 
<input type="text" id="latitude" placeholder="Latitude"/> 
<input type="text" id="longitude" placeholder="Longitude"/> 

我的JS:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
var map; 
var marker; 
var myLatlng = new google.maps.LatLng(20.268455824834792, 85.84099235520011); 
var geocoder = new google.maps.Geocoder(); 
var infowindow = new google.maps.InfoWindow(); 

function initialize() { 
    var mapOptions = { 
     zoom: 18, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 

    marker = new google.maps.Marker({ 
     map: map, 
     position: myLatlng, 
     draggable: true 
    }); 

    geocoder.geocode({ 
     'latLng': myLatlng 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) { 
       $('#latitude,#longitude').show(); 
       $('#address').val(results[0].formatted_address); 
       $('#latitude').val(marker.getPosition().lat()); 
       $('#longitude').val(marker.getPosition().lng()); 
       infowindow.setContent(results[0].formatted_address); 
       infowindow.open(map, marker); 
      } 
     } 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 

     geocoder.geocode({ 
      'latLng': marker.getPosition() 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0]) { 
        $('#address').val(results[0].formatted_address); 
        $('#latitude').val(marker.getPosition().lat()); 
        $('#longitude').val(marker.getPosition().lng()); 
        infowindow.setContent(results[0].formatted_address); 
        infowindow.open(map, marker); 
       } 
      } 
     }); 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

我的問題:我需要什麼代碼d添加爲了添加街道視圖框下的地圖,鏈接到路線圖並顯示標記的當前位置?

我alerady知道這是可以通過

new google.maps.StreetViewPanorama(document.getElementById("DIV-BOX")); 

初始化街景,但我不知道如何街景融入我的代碼。

+0

這個問題被問像3天前。做一個搜索 –

回答

0

通過地圖的streetView - 屬性進行定義:

var mapOptions = { 
    zoom: 18, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetView: new google.maps.StreetViewPanorama(document.getElementById("DIV-BOX")) 
}; 

http://jsfiddle.net/SULSV/1/