Question

使用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
        });
      }
    });
  }

唯一的问题是，当它初始化时，它会将它作为瞬间“拉上”。我无法弄清楚如何在“myOptions”中设置中心。我虽然可以从codeAddress函数返回“results [0] .geometry.location”并将其传递给myOptions，但这不起作用。

感谢您的帮助。

更新由于我不能完全删除“中心”，我想知道是否有办法将地址传递给选项。

来自Google API：

要初始化Map，我们首先创建一个Map选项对象以包含地图初始化变量。   该对象未构造;相反，它被创建为对象文字。有两个需要   每张地图的选项： center 和 zoom 。

Answer 1

一个简单的解决方案可能是在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
            });
        }
    });
}

这应该可以解决问题。

Answer 2

这是一个了不起的答案，真的帮助我走得更远。现在唯一的问题是 setCenter 在 JavaScript API 中不再有效。这是我使用 fitBounds 的示例，ES6 箭头函数访问 this 对谷歌地图角度组件的引用，最后实现 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 && 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

Google Maps v3 - 如何在初始化时使用地址居中？

2 个答案: