Question

我正在使用以下功能异步加载Google地图，并且地图会刷新为中心选择从下拉列表中选择的值，如果它发生了变化，那么全部工作正常。

我遇到的问题是，每次页面加载或地图重新加载下拉列表中的值时，地图首先加载旧金山，然后加载正确的位置后加载一两秒，这是我编码的问题还是我有什么办法可以解决这个问题，我已经在网上看了一下，但是在这个问题上找不到太多问题，这是一个异步加载地图的问题吗？

非常感谢任何帮助。

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

最简单的解决方法是，只要知道将地图初始化到哪里，就会初始化地图。

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>

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

1 个答案: