Блог

Используя Google Maps API v3, есть ли способ установить центр карты при инициализации? У меня есть обходной путь с использованием этого кода:

 var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    codeAddress('germany');
  }

  function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      }
    });
  }
  

Единственная проблема заключается в том, что при инициализации он центрирует его на «latlng» на долю секунды. Я не могу понять, как установить центр в «myOptions». Я думал, что мог бы вернуть «результаты [0].geometry.location» из функции codeAddress и передать его в myOptions, но это не работает.

Спасибо за любую помощь.

Обновление Поскольку я не могу полностью удалить «center», мне интересно, есть ли способ передать адрес в параметры.

Из Google API:

Чтобы инициализировать карту, мы сначала создаем объект Map options, содержащий переменные инициализации карты. Этот объект не создается; вместо этого он создается как объектный литерал. Для каждой карты требуется два параметра: центрировать и масштабировать.

Ну, простым решением может быть инициализация карты в вашей функции codeAddress:

 var geocoder, map;

function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 8,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        }
    });
}
  

Это должно решить проблему.

Это удивительный ответ, который действительно помог мне продвинуться очень далеко. Единственная проблема сейчас заключается в том, что setCenter это больше недопустимо в JavaScript API. Вот мой пример использования fitBounds функций ES6 arrow для доступа к this ссылке на угловой компонент Google map и, наконец, реализации ngOnChanges для прослушивания изменений в текстовом поле адреса и соответствующего повторного отображения карты.

     ngOnChanges(changes: SimpleChanges) {
        const newFormattedAddress = changes['formattedAddress']?.currentValue;
        if (!newFormattedAddress) {
            return;
        }

        // if we received an update to the formattedAddress from the search box
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode(
            {
                address: newFormattedAddress
            },
            (results: GeocoderResult[], status: GeocoderStatus) => {
                if (status === GeocoderStatus.OK amp;amp; results.length > 0) {
                    const firstResult = results[0].geometry;
                    const bounds = new google.maps.LatLngBounds();

                    if (firstResult.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(firstResult.viewport);
                    } else {
                        bounds.extend(firstResult.location);
                    }

                    this.map.fitBounds(bounds);
                }
            }
        );
    }
  

Внешние ссылки и оценка fitBounds кода: https://kevinkreuzer.medium.com/how-to-implement-an-address-search-with-angular-and-google-maps-32a2df09f8e9