“fitBounds”Google Maps and Places API无效

时间:2017-08-09 01:50:56

标签: api google-maps google-maps-api-3 initialization

目的:此代码的目标是让用户能够搜索位置并将地图缩放到给定的位置区域。

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

注意:我被告知在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 -->

1 个答案:

答案 0 :(得分: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