Question

我正在尝试在用户提交表单时动态生成Google地图，但在提交表单时地图不会出现在其div中。

我测试了地图是否只在页面加载上填充，但确实如此，但是当尝试使用显示onclick的div时，地图不会显示。

<form onsubmit="return false" action="">
  <input type="text" id="addLocation"/>
  <button onclick="findLocation()" id="btnLocation">Find Location</button>
</form>

<div id="mapContainer"></div>

这是JavaScript：

function findLocation(){
  var inputString = $('#addLocation').val();
  $('#mapContainer').html('<div id="mapCanvas"></div>');

  var apiRequest = $.ajax({
    url: 'http://xxxxx.net/json/'+ inputString,
    dataType: 'json',
    type: 'get',
  });

  apiRequest.done(function(data){
    var lat = data['latitude'];
    var lng = data['longitude'];

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 8
      };
      map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    }

    // from GMaps API docs 
    function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&callback=initialize';
      document.body.appendChild(script);
    }
    window.onload = loadScript;

   }); // ends .done statement 
 } // ends findLocation

当您单击“查找位置”按钮时，它将在mapCanvas div中生成一个地图，但它不会。

我发现from the Google Maps API documentation如果要异步加载地图，则必须使用该loadScript函数。

是的，地图div在CSS中有宽度和高度，所以这不是问题。我认为问题在于Javascript范围。我对调用的顺序或位置做错了，只是不确定是什么。

Answer 1

首先，当您想要动态创建地图时，必须异步加载Maps API。您可以使用异步方法或使用传统的<script>标记加载API。加载API不会创建地图;它只是加载代码。在致电new google.maps.Map()之前，系统不会创建地图。

因此，一个简单的解决方案是返回<script>标记来加载API，并直接在ajax回调中直接调用initialize()函数。（或者将代码从initialize()函数中拉出来，然后在回调中内联运行。）

事实上，在您当前的代码中，已经在页面加载时加载Maps API，使用以下行：

window.onload = loadScript;

这会导致在页面加载时调用loadScript()函数。

因此，您也可以使用<script>标记加载API，它或多或少与您现在正在做的事情相同但更简单。

如果您确实要动态加载Maps API，@ sirfriday的评论是正确的：您的initialize函数在全局范围内不可见，并且需要异步API加载才能准备好后再打电话。

你提到过＆＃34;调用initialize没有做到。＆＃34; - 但是在这种情况下你不应该调用 initialize()，你应该将window.initialize设置为对函数的引用，例如：

window.initialize = initialize;  // note no () so it doesn't call it here

或者改变这样的功能：

window.initialize = function() {
    ...
};

如果您想动态加载API，请不要在onload时间执行此操作。而是在你的ajax回调中调用你的loadScript()函数。这将为您提供正确的操作顺序：

页面加载
用户与之交互并启动ajax请求
Ajax请求完成
Maps API加载
您的initialize()函数被调用

将Google地图嵌入到动态创建的div中

1 个答案: