如何在街景視圖中向Google地圖添加搜索框

Question

我希望地圖在搜索框中輸入新地址時更新為用戶提供的新地址。 這是我嘗試過的但無法正常工作

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

它嘗試了很多選擇，但仍然無法正常工作

Answer 1

有兩個問題：

addressField定義得太早（此時輸入未知）
修改lag / lat -variables不會對地圖/全景產生影響（您必須將LatLng分配給map center / panorama position ）

如何在街景視圖中向Google地圖添加搜索框

問題描述

1 個解決方案

解決方案1
0 2014-03-30 04:35:27

如何在街景視圖中向Google地圖添加搜索框

問題描述

1 個解決方案

解決方案1 0 2014-03-30 04:35:27

解決方案1
0 2014-03-30 04:35:27