谷歌地图API没有;t显示地图，如果中心由javascript函数填充

Google Maps API doesn't display map if the center is populated by a javascript function

本文关键字：javascript 填充 函数 如果 没有 API 地图 显示 谷歌地图      更新时间：2023-09-26

所以，当我这样做时：

<!-- javascript file -->
function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
        return latLng.lat() + ", " + latLng.lng();
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
<!-- HTML view -->
  <script type="text/javascript">
  $(function(){
    myOptions = {
      center: new google.maps.LatLng(geocodeFromAdress('Los Angeles')),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    addFacilities(Gmaps.map);
  });
  </script>

地图没有被渲染，但如果我渲染了：

  <script type="text/javascript">
  $(function(){
    myOptions = {
      center: new google.maps.LatLng(34.0522342, -118.2436849),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    addFacilities(Gmaps.map);
  });
  </script>

则映射被正确地渲染。为什么它不接受JS函数的协调？

JS函数的输出：34.0522342, -118.2436849

提前谢谢。

映射不会重新定义信标，因为mapOptions中的center需要一个值，但当您这样做时：

center: new google.maps.LatLng(geocodeFromAdress('Los Angeles'))

从geocodeFromAdress('Los Angeles')返回的是undefined，因此没有值传递给google.maps.LatLng函数。

您可以临时给出一个中心，然后在地理编码器返回时设置中心：

function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
        Gmaps.map.setCenter(latLng);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

或者在地理编码器返回时初始化地图：

function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
       myOptions = {
      center: new google.maps.LatLng(latLng),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
相关文章：