Question

我正在尝试使用JQueryUJS从rails应用程序发出一个AJAX请求，以检索谷歌地图应该重新居中的纬度/经度坐标。

AJAX响应正在返回javascript运行，但我发现无论是直接操作地图对象还是在客户端上使用javascript代码运行函数都不起作用，因为变量或函数都不可用。

为什么我不能使用现有变量？还有哪些替代方案可以根据AJAX响应重新定位地图？

尝试调用函数的代码如下：

HTML片段：

<form accept-charset="UTF-8" action="/venues" class="new_venue" data-remote="true" id="new_venue" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <div id="entry-form" class="left span8"> 
    <input class="btn btn-primary" name="find_address_button" type="submit" value="Find Address" />
    <div id='map_canvas' class='map_new' data-default-zoom= 16></div>
    <input class="btn btn-large btn-primary" name="commit" type="submit" value="Add Venue" />
  </div> 
</form>

页面加载JS：

(function() {
  $(document).ready(function() {
    var default_zoom, latitude, longitude, map, mapOptions, map_centre, moveToLocation;
    moveToLocation = function(lat, lng) {
      var center;
      center = new google.maps.LatLng(lat, lng);
      return map.panTo(center);
    };
    latitude = 52;
    longitude = 0;
    map_centre = new google.maps.LatLng(latitude, longitude);
    default_zoom = $("#map_canvas").data("default-zoom");
    mapOptions = {
      center: map_centre,
      zoom: default_zoom,
      scrollwheel: false,
      styles: [
        {
          featureType: "poi",
          elementType: "labels",
          stylers: [
            {
              visibility: "off"
            }
          ]
        }
      ]
    };
    return map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  });

}).call(this);

AJAX响应：

moveToLocation(-34, 150);

Answer 1

通过jquery加载的脚本（例如，通过$.getScript）将在全局上下文中执行，但moveToLocation未在全局上下文中定义。

您必须使该功能全局可访问：

window.moveToLocation= ......

AJAX响应移动谷歌地图中心

1 个答案: