1. 首页
  2. 问答
  3. “fitBounds”谷歌地图和地方API不工作

“fitBounds”谷歌地图和地方API不工作

2017-08-09 56 views
-1

目的：此代码的目标是让用户能够搜索位置和地图放大到给定的位置区域。“fitBounds”谷歌地图和地方API不工作

问题：在搜索栏中可以输入地址..谷歌地点的建议将自动填充，用户可以选择一个位置..但是，选择后谷歌地图不会放大到指定区域..它仍然放大默认区。

注意：我已经被告知，在init（）函数中，“fitBounds”与代码无关，但是当我尝试将代码更改为以下代码时。

map = new google.maps.Map(mapElement, mapOptions);

地图不再显示。我该如何解决这个问题？

源代码：

<div class="form-group"> 
              <label for="mapsearch">Location</label> 
              <div class="input-group location"> 
               <input type="text" class="form-control" id="mapsearch" placeholder="Enter Location"> 
               <span class="input-group-addon"><i class="fa fa-map-marker geolocation" data-toggle="tooltip" data-placement="bottom" title="Find my position"></i></span> 
              </div> 
    </div> 
             <!-- /.form-group --> 


    <div class="map" id='mapkit-2243'> 

     <script> 
google.maps.event.addDomListener(window, 'load', init); 
var map, markersArray = []; 

function bindInfoWindow(marker, map, location) { 
    google.maps.event.addListener(marker, 'click', function() { 
     function close(location) { 
      location.ib.close(); 
      location.infoWindowVisible = false; 
      location.ib = null; 
     } 

     if (location.infoWindowVisible === true) { 
      close(location); 
     } else { 
      markersArray.forEach(function(loc, index){ 
       if (loc.ib && loc.ib !== null) { 
        close(loc); 
       } 
      }); 

      var boxText = document.createElement('div'); 
      boxText.style.cssText = 'background: #fff;'; 
      boxText.classList.add('md-whiteframe-2dp'); 

      function buildPieces(location, el, part, icon) { 
       if (location[part] === '') { 
        return ''; 
       } else if (location.iw[part]) { 
        switch(el){ 
         case 'photo': 
          if (location.photo){ 
           return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>'; 
          } else { 
           return ''; 
          } 
          break; 
         case 'iw-toolbar': 
          return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>'; 
          break; 
         case 'div': 
          switch(part){ 
           case 'email': 
            return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="mailto:' + location.email + '" target="_blank">' + location.email + '</a></span></div>'; 
            break; 
           case 'web': 
            return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="' + location.web + '" target="_blank">' + location.web_formatted + '</a></span></div>'; 
            break; 
           case 'desc': 
            return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>'; 
            break; 
           default: 
            return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location[part] + '</span></div>'; 
           break; 
          } 
          break; 
         case 'open_hours': 
          var items = ''; 
          if (location.open_hours.length > 0){ 
           for (var i = 0; i < location.open_hours.length; ++i) { 
            if (i !== 0){ 
             items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours +'</strong></li>'; 
            } 
            var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>' + location.open_hours[0].day + '</strong><strong>' + location.open_hours[0].hours +'</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>'; 
           } 
           return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>'; 
          } else { 
           return ''; 
          } 
          break; 
        } 
       } else { 
        return ''; 
       } 
      } 

      boxText.innerHTML = 
       buildPieces(location, 'photo', 'photo', '') + 
       buildPieces(location, 'iw-toolbar', 'title', '') + 
       buildPieces(location, 'div', 'address', 'location_on') + 
       buildPieces(location, 'div', 'web', 'public') + 
       buildPieces(location, 'div', 'email', 'email') + 
       buildPieces(location, 'div', 'tel', 'phone') + 
       buildPieces(location, 'div', 'int_tel', 'phone') + 
       buildPieces(location, 'open_hours', 'open_hours', 'access_time') + 
       buildPieces(location, 'div', 'desc', 'keyboard_arrow_down'); 

      var myOptions = { 
       alignBottom: true, 
       content: boxText, 
       disableAutoPan: true, 
       maxWidth: 0, 
       pixelOffset: new google.maps.Size(-140, -40), 
       zIndex: null, 
       boxStyle: { 
        opacity: 1, 
        width: '280px' 
       }, 
       closeBoxMargin: '0px 0px 0px 0px', 
       infoBoxClearance: new google.maps.Size(1, 1), 
       isHidden: false, 
       pane: 'floatPane', 
       enableEventPropagation: false 
      }; 

      location.ib = new InfoBox(myOptions); 
      location.ib.open(map, marker); 
      location.infoWindowVisible = true; 
     } 
    }); 
} 

function init() { 
    var mapOptions = { 
     center: new google.maps.LatLng(32.796154069254015,-96.80221670166623), 
     zoom: 19, 
     gestureHandling: 'auto', 
     fullscreenControl: true, 
     zoomControl: false, 
     disableDoubleClickZoom: true, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     }, 
     scaleControl: true, 
     scrollwheel: true, 
     streetViewControl: false, 
     draggable : true, 
     clickableIcons: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [{"stylers":[{"hue":"#B61530"},{"saturation":60},{"lightness":-40}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"water","stylers":[{"color":"#B61530"}]},{"featureType":"road","stylers":[{"color":"#B61530"},{}]},{"featureType":"road.local","stylers":[{"color":"#B61530"},{"lightness":6}]},{"featureType":"road.highway","stylers":[{"color":"#B61530"},{"lightness":-25}]},{"featureType":"road.arterial","stylers":[{"color":"#B61530"},{"lightness":-10}]},{"featureType":"transit","stylers":[{"color":"#B61530"},{"lightness":70}]},{"featureType":"transit.line","stylers":[{"color":"#B61530"},{"lightness":90}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.station","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]}] 
    } 
    var mapElement = document.getElementById('mapkit-2243'); 
    var map = new google.maps.Map(mapElement, mapOptions); 
    var locations = [ 
     {"title":"American Airlines Center","address":"2500 Victory Ave, Dallas, TX 75219, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7905064,"lng":-96.8103549,"vicinity":"2500 Victory Ave, Dallas, TX 75219, United States","open_hours":"","marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Avenu Lounge","address":"2912 McKinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.8001166,"lng":-96.80059410000001,"vicinity":"2912 McKinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Bombshells - Dallas","address":"7501 N Stemmons Fwy, Dallas, TX 75247, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.820152,"lng":-96.870677,"vicinity":"7501 N Stemmons Fwy, Dallas, TX 75247, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Circo Texas","address":"2619 McKinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.797091,"lng":-96.801943,"vicinity":"2619 McKinney Ave, Dallas, TX 75204, United States","open_hours":"","marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Clutch Bar and Restaurant","address":"2520 Cedar Springs Rd, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7988131,"lng":-96.80514870000002,"vicinity":"2520 Cedar Springs Rd, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Concrete Cowboy","address":"2512 Cedar Springs Rd, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7983882,"lng":-96.80525010000002,"vicinity":"2512 Cedar Springs Rd, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"District","address":"1520 Main St, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.780521,"lng":-96.798631,"vicinity":"1520 Main St, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Fat Rabbit","address":"2533 McKinney Ave, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7962824,"lng":-96.80203640000002,"vicinity":"2533 McKinney Ave, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Frankie's - Downtown","address":"1303 Main St, Dallas, TX 75202, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7804885,"lng":-96.8006992,"vicinity":"1303 Main St, Dallas, TX 75202, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Hard Rock Cafe","address":"2211 N Houston St, Dallas, TX 75219, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.78461349999999,"lng":-96.80912119999999,"vicinity":"2211 N Houston St, Dallas, TX 75219, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Harwood International","address":"14, 2501 N Harwood St, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7916813,"lng":-96.80628179999997,"vicinity":"14, 2501 N Harwood St, Dallas, TX 75201, United States","open_hours":"","marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Havana Social Club","address":"3030 Olive St, Dallas, TX 75219, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7895073,"lng":-96.80912089999998,"vicinity":"3030 Olive St, Dallas, TX 75219, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"House of Blues","address":"2200 N Lamar St, Dallas, TX 75202, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7850366,"lng":-96.80824989999996,"vicinity":"2200 N Lamar St, Dallas, TX 75202, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Illume Nightclub","address":"1015 Elm St, Dallas, TX 75202, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7807779,"lng":-96.803675,"vicinity":"1015 Elm St, Dallas, TX 75202, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Jakes Burgers and Beer","address":"2702 McKinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7974859,"lng":-96.80119760000002,"vicinity":"2702 McKinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Kung Fu Saloon","address":"2911 Routh St, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7991499,"lng":-96.8052174,"vicinity":"2911 Routh St, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Level","address":"3005 Routh St, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7993978,"lng":-96.8056105,"vicinity":"3005 Routh St, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Masque","address":"2533 McKinney Ave, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7962967,"lng":-96.80208959999999,"vicinity":"2533 McKinney Ave, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"McKinney Avenue Tavern","address":"2822 Mc Kinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.79928419999999,"lng":-96.80066369999997,"vicinity":"2822 Mc Kinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Medusa Dallas","address":"1930 Pacific Ave, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7828849,"lng":-96.79473080000002,"vicinity":"1930 Pacific Ave, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Nickel And Rye","address":"2523 McKinney Ave, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.796114,"lng":-96.80220029999998,"vicinity":"2523 McKinney Ave, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Punk Society","address":"752261533, 2723 Elm St, Dallas, TX 75226, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.784821,"lng":-96.783792,"vicinity":"752261533, 2723 Elm St, Dallas, TX 75226, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Quill Kitchen + Cocktails","address":"1628 Oak Lawn Ave #100, Dallas, TX 75207, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7971327,"lng":-96.81936359999997,"vicinity":"1628 Oak Lawn Ave #100, Dallas, TX 75207, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Sandbar Cantina And Grill","address":"317 S 2nd Ave, Dallas, TX 75226, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7835101,"lng":-96.7742619,"vicinity":"317 S 2nd Ave, Dallas, TX 75226, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Sidebar","address":"2626 Howell St #100, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7986114,"lng":-96.8027884,"vicinity":"2626 Howell St #100, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Sisu","address":"2508 Maple Ave, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7950418,"lng":-96.80349419999999,"vicinity":"2508 Maple Ave, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Status NightClub","address":"2019 N Lamar St, Dallas, TX 75202, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7836542,"lng":-96.80748240000003,"vicinity":"2019 N Lamar St, Dallas, TX 75202, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Taboo Lounge Dallas","address":"1418 N Riverfront Blvd, Dallas, TX 75207, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.790672,"lng":-96.82028300000002,"vicinity":"1418 N Riverfront Blvd, Dallas, TX 75207, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Tacos & Tequila","address":"2800 Routh St #155, Dallas, TX 75201, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7989161,"lng":-96.80311460000001,"vicinity":"2800 Routh St #155, Dallas, TX 75201, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Tate's","address":"2723 McKinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7986306,"lng":-96.80134950000001,"vicinity":"2723 McKinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"The Bomb Factory","address":"2713 Canton St, Dallas, TX 75226, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7821473,"lng":-96.78413639999997,"vicinity":"2713 Canton St, Dallas, TX 75226, United States","open_hours":"","marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"The Den","address":"2710 Mc Kinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7978287,"lng":-96.8010233,"vicinity":"2710 Mc Kinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"The Ginger Man","address":"2718 Boll St, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7982715,"lng":-96.80296120000003,"vicinity":"2718 Boll St, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Trees","address":"2709 Elm St, Dallas, TX 75226, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.7846208,"lng":-96.7843848,"vicinity":"2709 Elm St, Dallas, TX 75226, United States","open_hours":"","marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Trophy Room","address":"2714 McKinney Ave, Dallas, TX 75204, United States","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":32.797999,"lng":-96.8009912,"vicinity":"2714 McKinney Ave, Dallas, TX 75204, United States","open_hours":[],"marker":"http://i.imgur.com/72aqKo5.png","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}} 
    ]; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      icon: locations[i].marker, 
      position: new google.maps.LatLng(locations[i].lat, locations[i].lng), 
      map: map, 
      title: locations[i].title, 
      address: locations[i].address, 
      desc: locations[i].desc, 
      tel: locations[i].tel, 
      int_tel: locations[i].int_tel, 
      vicinity: locations[i].vicinity, 
      open: locations[i].open, 
      open_hours: locations[i].open_hours, 
      photo: locations[i].photo, 
      time: locations[i].time, 
      email: locations[i].email, 
      web: locations[i].web, 
      iw: locations[i].iw 
     }); 
     markersArray.push(marker); 

     if (locations[i].iw.enable === true){ 
      bindInfoWindow(marker, map, locations[i]); 
     } 
    } 
} 


// search box 

var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch')); 


//place change event.. 

google.maps.event.addListener(searchBox, 'places_changed', function() { 

var places = searchBox.getPlaces(); 
var bounds= new google.maps.LatLngBounds(); 
var i, place; 

for (i = 0; place = places[i]; i++) { 
    bounds.extend(place.geometry.location); 
    marker.setPosition(place.geometry.location); 
} 

map.fitBounds(bounds); 
map.setZoom(15); 

}); 


 </div><!--/col-lg-4 --> 


    </div><!-- /row -->

来源

2017-08-09 Bo Sijuade

+2

欢迎堆栈溢出。请阅读[问]关于如何编写好的堆栈溢出问题的指导。特别是你应该阅读[mcve] – Mick

+0

我得到一个javascript错误与发布的代码：'未捕获的TypeError：无法读取未定义的属性'fitBounds'，如果我在'map'之前删除'var'，它会显示一张地图。请提供一个[mcve]（重点介绍** minimal **），以说明您的问题。 – geocodezip

回答

0

如果您希望地图放大在SearchBox选择的区域，你需要编写代码来做到这一点。目前，该代码将改变过去的标记的位置到最后结果的位置：

for (i = 0; place = places[i]; i++) { 
    bounds.extend(place.geometry.location); 
    marker.setPosition(place.geometry.location); 
}

相反，我建议改变地图的位置，第一个结果的建议视。

map.fitBounds(places[0].geometry.viewport);

proof of concept fiddle

来源

2017-08-09 12:18:00 geocodezip

+0

谢谢..我正在尝试实现代码，但它不会产生与您的概念证明相同的结果。我只是删除了代码行“for（i = 0; place = places [i]; i ++）{bounds.extend（place.geometry.location）; marker.setPosition（place.geometry.location）;”并用map.fitBounds（places [0] .geometry.viewport）替换它; ？ 注意：我是Google Maps API和Javascript的新手 –

+0

很难说您的问题是什么（因为您在原始问题中没有提供[mcve]，所以我不知道我的工作示例与您的不同非工作的，可能是我添加的工作使你的代码中存在一些其他问题） – geocodezip

相关问题

 相关问题