Question

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

我已经成功地将新位置设置为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

试试这个：

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

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

然后我们的想法是使用the将新旧界限结合在一起。然后，Union方法将结果用作巡视新地图边界。

originalbounds.union(newbounds)

Google Maps API重绘区域的地理编码

1 个答案: