2014-03-30 71 views
0

我希望地圖在搜索框中輸入新地址時更新爲用戶給出的新地址。這是我試過,但沒有工作如何將搜索框添加到帶有街景的谷歌地圖

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Street View service</title> 
     <style> 
      html, body, #map-canvas { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
      } 
     </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script> 
     var lag =151.1956316; 
     var lat = -33.8665433; 
    function initialize() { 
     var fenway = new google.maps.LatLng(lat, lag); 
     var mapOptions = { 
     center: fenway, 
     zoom: 14 
     }; 
     var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions); 
     var panoramaOptions = { 
     position: fenway, 
     pov: { 
      heading: 34, 
      pitch: 10 
     } 
     }; 
     var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions); 
     map.setStreetView(panorama); 
    } 
    // search for new Addreess 
    var addressField = document.getElementById('search_address'); 
    var geocoder = new google.maps.Geocoder(); 
    function search() { 
     geocoder.geocode(
      {'address': addressField.value}, 
      function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        var loc = results[0].geometry.location; 
        // use loc.lat(), loc.lng() 
        lat = loc.lat(); 
        lag = loc.lng(); 

      google.maps.event.addDomListener(window, 'load', initialize); 

       } 
       else { 
        alert("Not found: " + status); 
       } 
      } 
     ); 
    }; 


    google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 
     </head> 
     <body> 
     <div id="map-canvas" style="width: 400px; height: 300px"></div> 
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
     <div id="panel"> 
     <input type="text" id="search_address" value=""/> 
     <button onclick="search();">Search</button> 
     </div> 
     </body> 
    </html> 

它嘗試了很多選項,但仍無法正常工作

回答

0

有2個問題:

  1. addressField -variable已被定義爲時尚早(在輸入未知)
  2. 修改滯後/緯度變量不會影響地圖/全景 (您必須將LatLng分配給的/positionpanorama
+0

謝謝。我已經解決了 – user3335188