Question

嗨，我刚接触谷歌地图和Jquery，我遇到了一个问题，我需要在单选按钮更改时触发或聚焦设置地图焦点。有人可以帮我解决这种情况吗？

代码段：

function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            geocode = new google.maps.Geocoder();

            // Used to Set the Center of the Maps on the Logged User
            $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) {
                $.each(address, function () {

                    customerlocationID = this["ID"];
                    var currValAddress = this["AddressLine1"];
                    var Latitude = this["Latitude"];
                    var Longitude = this["Longitude"];
                    LatLang = new google.maps.LatLng(Latitude, Longitude);
                    var addresse = {
                        zoom: 16,
                        center: LatLang,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map'), addresse);

                    var link = $('<input type="radio" name="a"/><label>'+ currValAddress+'</label>').data('location', LatLang);
                    $('#initialPlace').append($('<li id=\'List\' class=\'List\'>').append(link));
                    link.on('click', function (event) {
                        var $t = $(event.target);
                        if ($t.hasClass('checked')) {
                            map.setCenter(LatLang);
                            $t.removeAttr('checked');
                        }
                        $('input[type="radio"][name="' + $t.prop('name') + '"]').not($t).removeClass('checked');
                        $t.toggleClass('checked');
                    }).filter(':checked').addClass('checked');

                    // Bounds for North America
                    var strictBounds = new google.maps.LatLngBounds(
                      new google.maps.LatLng(15.70, -160.50),
                      new google.maps.LatLng(68.85, -55.90));

                    // Listen for the dragend event
                    google.maps.event.addListener(map, 'dragend', function () {
                        if (strictBounds.contains(map.getCenter())) return;
                        // We're out of bounds - Move the map back within the bounds

                        var c = map.getCenter(),
                      x = c.lng(),
                      y = c.lat(),
                      maxX = strictBounds.getNorthEast().lng(),
                      maxY = strictBounds.getNorthEast().lat(),
                      minX = strictBounds.getSouthWest().lng(),
                      minY = strictBounds.getSouthWest().lat();

                        if (x < minX) x = minX;
                        if (x > maxX) x = maxX;
                        if (y < minY) y = minY;
                        if (y > maxY) y = maxY;

                        map.setCenter(new google.maps.LatLng(y, x));
                    });

                    // Limit the zoom level
                    google.maps.event.addListener(map, 'zoom_changed', function () {
                        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
                    });
                });
            });
            if (customerlocationID != 0) {

                codeAddress(customerlocationID, Rad);
            }

        }

Answer 1

在初始化函数中，为单选按钮添加一个事件监听器，如：

google.maps.event.addDomListener(document.getElementById([your radio button id]), 'click', function() {
       google.maps.event.trigger(map, 'resize'); // or whatever
});

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

的文档中有一个例子

List中的单选按钮由.each循环填充

1 个答案: