Javascript 如何使用街景向谷歌地图添加搜索框_Javascript_Google Maps_Google Maps Api 3

Javascript 如何使用街景向谷歌地图添加搜索框

javascript google-maps google-maps-api-3

Javascript 如何使用街景向谷歌地图添加搜索框,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在搜索框中输入新地址时，我希望地图更新为用户给定的新地址。这是我尝试过的，但不起作用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Street View service</title> <style> html, body, #map-canv

在搜索框中输入新地址时，我希望地图更新为用户给定的新地址。这是我尝试过的，但不起作用

    <!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>


街景服务
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var滞后=151.1956316；
var lat=-33.8665433；
函数初始化（）{
var fenway=new google.maps.LatLng（lat，lag）；
变量映射选项={
中心：芬威，
缩放：14
};
var map=new google.maps.map(
document.getElementById（'map-canvas'）、mapOptions）；
变量全景选项={
位置：芬威，
pov：{
标题：34，
投球：10
}
};
var panorama=new google.maps.StreetViewPanorama（document.getElementById（'pano'），panoramoptions）；
地图设置树视图（全景）；
}
//搜索新地址树
var addressField=document.getElementById（'search_address'）；
var geocoder=new google.maps.geocoder（）；
函数搜索（）{
地理编码(
{'address'：addressField.value}，
功能（结果、状态）{
如果（status==google.maps.GeocoderStatus.OK）{
var loc=results[0]。geometry.location；
//使用loc.lat（），loc.lng（）
lat=loc.lat（）；
滞后=位置lng（）；
google.maps.event.addDomListener（窗口“加载”，初始化）；
} 
否则{
警报（“未找到：+状态”）；
} 
}
);
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
搜索

它尝试了许多选项，但仍然不起作用

有两个问题：

    <!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>

addressField

-变量定义得太早（此时输入未知）

修改lag/lat-变量不会对地图/全景图产生影响（您必须为

全景图的地图的中心
/位置
指定一个板条。）