Google Maps API 重绘地理编码界限

Question

我正在创建一个包含位置列表的谷歌地图，然后我希望用户能够在地图中输入他们的（任何）地址。输入地址后，必须显示一个新标记，并且地图的边界需要更新以包含新位置。

我已经成功地将新位置设置为 cookie 并在加载时重绘地图的边界，但是当我尝试在地理编码输入单击上执行此操作时，新标记会加载，但边界似乎只在新位置周围重绘。

如何获得在输入​​上重绘的边界？

开发站点链接：http://rosemontdev.com/google-maps-api/

这是我的代码：

var locations = [
    ['Dripping Springs', 30.194826, -97.99839],
    ['Steiner Ranch', 30.381754, -97.884735],
    ['Central Austin', 30.30497, -97.744086],
    ['Pflugerville', 30.450049, -97.639163],
    ['North Austin', 30.41637, -97.704623],
];

var currentLocationMarker = "http://rosemontdev.com/google-maps-api/wp-content/themes/rm-theme/images/current.png";
var locationMarker = "http://rosemontdev.com/google-maps-api/wp-content/themes/rm-theme/images/pin.png";


function initMap() {

    window.map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoWindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();
    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
        geocodeAddress(geocoder, map);

    });



    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: locationMarker,
        });

        var circle = new google.maps.Circle({
            map: map,
            radius: 3000,
            fillColor: '#2B98B0',
            fillOpacity: 0.2,
            strokeOpacity: 0.25,
        });
        circle.bindTo('center', marker, 'position');

        bounds.extend(marker.position);

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(locations[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

    } //closing for locations loop

    var locationValue = Cookies.get('rmLocationCookie-Place');
    var longValue = Cookies.get('rmLocationCookie-Long');
    var latValue = Cookies.get('rmLocationCookie-Lat');
    currentLocationNewMarker = new google.maps.Marker({
        position: new google.maps.LatLng(longValue, latValue),
        map: map,
        icon: currentLocationMarker,
    });

    bounds.extend(currentLocationNewMarker.position);

    map.fitBounds(bounds);

} //closing initMap




function geocodeAddress(geocoder, resultsMap) {

    var address = document.getElementById('address').value;
    var infoWindow = new google.maps.InfoWindow();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === 'OK') {

            var currentLocationData = [];
            var bounds = new google.maps.LatLngBounds();
            var currentLocationName = 'Current Location';
            var currentLocationLong = results[0]['geometry']['bounds']['f']['b'];
            var currentLocationLat = results[0]['geometry']['bounds']['b']['b'];
            currentLocationData.push(currentLocationName, currentLocationLong, currentLocationLat);

            //Location Value Entered
            Cookies.set('rmLocationCookie-Place', address);
            //Geocoded Long
            Cookies.set('rmLocationCookie-Long', currentLocationLong);
            //Geocoded Lat
            Cookies.set('rmLocationCookie-Lat', currentLocationLat);

            var locationValue = Cookies.get('rmLocationCookie-Place');
            if(locationValue === undefined){
                console.log('no cookie set');
                $('#cookie-notice').html('Your location is not saved.');
            }
            else{
                $('#cookie-notice').html('Your location is saved as ' + locationValue +'');
            }

            updatedCurrentLocationMarker = new google.maps.Marker({
                position: new google.maps.LatLng(currentLocationLong, currentLocationLat),
                map: map,
                icon: currentLocationMarker,
            });

            bounds.extend(updatedCurrentLocationMarker.position);

            map.fitBounds(bounds);


        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }

    });
}

Answer 1

试试这个：

在每次地理编码之前跟踪原始边界。

然后，一旦地理编码完成平移到标记并获取新地图的边界。

然后的想法是使用. 将新旧边界联合在一起。然后联合方法将结果作为游览新地图边界。

originalbounds.union(newbounds)