3

我正在开发一个需要在模式弹出窗口中加载谷歌地图的项目（我使用的是 api 版本 3）。

modal的内容是使用ajax调用加载的，我想要获取的是动态加载google map api。

下面的代码让我获得了我正在寻找的确切结果，但显然它也有一个副作用，我无法弄清楚如何解决（也许我在整个过程中做错了什么，我只是无法弄清楚什么）。每一个帮助都将非常感激，我提前感谢能够澄清我的想法的人。

注意（1）：我使用了 2 个不同版本的代码（一个使用 url 参数加载 api，另一个使用 google 加载功能），结果是一样的。

注意（2）：完整的开发是使用 Ruby on Rails 3 进行的，并试图充分利用资产管道功能。

代码（解释）

(1) JQUERY FUNCTION - 用于动态加载外部脚本

jQuery.externalScript = function(url, options) {
  // allow user to set any option except for dataType, cache, and url
  options = $.extend(options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax(options);
};

(2) JS FUNCTION - 这对谷歌加载 api 进行动态调用

function google_load_api_call() {
  var gmap_src = 'https://www.google.com/jsapi';
  $.externalScript(gmap_src).done(function() {
        load_google_maps_api_via_google_ajax_api_loader();
  });;
}

(3) JS FUNCTION - 使用 google load 动态调用 google maps api

function load_google_maps_api_via_google_ajax_api_loader() {
  google.load("maps", "3", {other_params:'libraries=places&sensor=false', callback: function(){
    initialize(); // initialize your map in here
  }});
}

(3) JS FUNCTION - 这会初始化谷歌地图（用作回调）

function initialize() {
  var mapOptions = {
    zoom: 0,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

(4) RAILS JS.ERB - 这用于加载模式，并加载所有内容（例如地图）

$('#section').append('<%= escape_javascript(render(:partial=>'locations/new_page/locations_new')) %>');

$(function() {
   modal_create_new_location(); // This call the modal to show
   google_load_api_call(); // This load the google load api and the map
   create_new_location_data_submit(); // This submit in ajax the form data
});

代码（结果和问题）

代码完美地执行其任务，模态加载，地图加载，库位置加载和工作。一切似乎完全正确（在 chrome 或 safari 中，没问题）。

只有当我在谷歌地图 api 调用中还包含一个库（例如地点或几何图形）时，才造成我巨大的折磨和痛苦的是 Firefox 提出的一个问题（实际上是一个警告） - 请参阅 JS 函数编号（3），存在 [other_params:'libraries=places] 的行。如果我不加载库，firefox 也不会再抱怨了，一切正常。

Firefox 提出的警告如下：

错误：已删除对 eval(code, scopeObject) 的支持。使用 |with (scopeObject) eval(code);| 反而。

它被称为：

https://maps.gstatic.com/cat_js/intl/en_US/mapfiles/api-3/10/19/ {main,places}.js

在第 9 行

有人可以让我理解我在这里做错了什么吗？我不应该使用动态调用来调用库吗？那么我如何使用自动完成地图功能呢？

4

0 回答 0