javascript - 谷歌地图加载旧金山然后重新加载正确的位置

Question

我使用以下函数异步加载 Google map ，如果下拉列表中选择的值发生变化， map 将刷新以居中，这一切都正常。

我遇到的问题是，每次加载页面或使用下拉列表中的值重新加载 map 时， map 都会先加载旧金山，然后在加载正确位置后一两秒加载，这是我的编码问题还是我对此能做些什么，我在网上查了一下，但在这个问题上找不到太多信息，这是 map 异步加载的问题吗？

非常感谢任何帮助。

function selectMapLocation(pLocationName)
{
    var map;

    if (pLocationName != "")
    {
        var geocoder = new google.maps.Geocoder();

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

        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-34.397, 150.644)
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        google.maps.event.addDomListener(window, 'load', initialize);
    }
    else
    {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644)
        };

        google.maps.event.addListener(map, 'click', function(event){
            var marker = new google.maps.Marker({
                position: event.latLng, 
                map: map
            });
        });

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }
}

Answer 1

最简单的修复方法是只有在知道将其初始化到何处后才初始化 map 。

function selectMapLocation(pLocationName) {
    var map;

    if (pLocationName != "") {
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({
            'address': pLocationName
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) { // result of geocoder request
                var mapOptions = {
                    zoom: 10,
                    center: results[0].geometry.location
                }
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
            } else { // default position 
                var mapOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(-34.397, 150.644)
                }
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
            }
        });
        // google.maps.event.addDomListener(window, 'load', initialize);
    } else { // default position
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644)
        };

        google.maps.event.addListener(map, 'click', function (event) {
            var marker = new google.maps.Marker({
                position: event.latLng,
                map: map
            });
        });

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }
}

working fiddle

工作代码片段:

function selectMapLocation(pLocationName) {
  var map;

  if (pLocationName != "") {
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
      'address': pLocationName
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var mapOptions = {
          zoom: 10,
          center: results[0].geometry.location
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
      } else {
        var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(-34.397, 150.644)
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
      }
    });
    // google.maps.event.addDomListener(window, 'load', initialize);
  } else {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    };

    google.maps.event.addListener(map, 'click', function(event) {
      var marker = new google.maps.Marker({
        position: event.latLng,
        map: map
      });
    });

    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }
}

html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<select onchange="selectMapLocation(this.value)">
  <option value="">---- select ----</option>>
  <option value="New York, NY">New York</option>
  <option value="Newark, NJ">Newark, NJ</option>
  <option value="Baltimore,MD">Baltimore, MD</option>
  <option value="Boston, MA">Boston, MA</option>
</select>