Google Maps API 重绘地理编码界限

Posted 2023-05-08

【中文标题】Google Maps API 重绘地理编码界限

【英文标题】：Google Maps API redraw bounds on geocode

【发布时间】：2018-07-02 16:19:09

【问题描述】：

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

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

    );

【问题讨论】：

您想要基于地理编码结果和您的数据的边界吗？

是的，这就是我要找的。​​span>

【参考方案1】：

试试这个：

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

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

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

originalbounds.union(newbounds) 

【讨论】：

能够根据您上面的建议使用类似的想法来完成这项工作。谢谢。

太好了，请将我的答案标记为正确，如果对您有帮助，请给我的答案投票。