javascript - 谷歌地图未捕获的类型错误

Question

自从我开始制作我的应用程序以来，控制台和 Chrome 中一直显示消息

Uncaught TypeError: Cannot read property 'Fa' of undefined

但是当我的应用加载正常并且我可以在屏幕、Chrome 和 Firefox 中看到所有内容时，我只是忽略了它。我知道它与我的 Google map 有关，因为当我在 Chrome 中调试以获取更多详细信息时，我可以找到:

Uncaught TypeError: Cannot read property 'Fa' of undefined
b.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
tJ.(anonymous function).Yc
(anonymous function)
(anonymous function)                                %7Bmain,places%7D.js:10
uJ
a.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
(anonymous function)

%7Bmain 链接转到 https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/6/%7Bmain,places%7D.js ，这是谷歌的东西。

然而，昨天我在 IE 中尝试了我的应用程序，但它因同样的错误而崩溃 - map 无法加载。知道可能出了什么问题以及我该如何解决它吗？

这是我的功能:

function initialize_google_maps() {

    var user_longitude = $("#user-position").attr("data-lng");
    var user_latitude = $("#user-position").attr("data-lat");

    var currentlatlng =
        new google.maps.LatLng(user_latitude, user_longitude);

    var zoom = 10;
    var myOptions = {
      zoom: zoom,
      center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        minZoom: 1, 
        // don't want people to be able to hone in
        // on others' addresses too specifically.
        maxZoom: 13
      };


      var map = new google.maps.Map(
          document.getElementById("map_canvas"),
          myOptions
      );

      var marker = new google.maps.Marker({
          map: map,
          position: currentlatlng,
          icon: { opacity: 0 }
      });

      var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: 10000,
      });
      circle.bindTo('center', marker, 'position');
    }

我这样调用它:

<!-- draw the map, on the right of the screen -->
    <div id="map_canvas">

      <script>
      $(function() {

// this function can be found in draw_map.js
      initialize_google_maps();

                   });
      </script>

    </div>

我看到一个stackoverflow问题here它看起来很相似，它说确保在呈现页面之前加载 javascript 所以我尝试像这样调用我的函数:

      <script>
$(document).on("ready", function(){

// this function can be found in draw_map.js
      initialize_google_maps();


  });

还是报同样的错。

我调用的 Google map 库如下:

 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>

Answer 1

我看到的第一个错误是您将字符串 传递给new google.maps.LatLng()。你需要给它数字。

代替这段代码:

var user_longitude = $("#user-position").attr("data-lng");
var user_latitude = $("#user-position").attr("data-lat");

var currentlatlng = new google.maps.LatLng(user_latitude, user_longitude);

使用:

var $position = $("#user-position"),
    lat = $position.attr("data-lat"),
    lng = $position.attr("data-lng");

var currentlatlng = new google.maps.LatLng( +lat, +lng );

让我看一下您的其余代码，但这是需要立即解决的问题。

顺便说一句，这只是一种风格建议，如您所见，我更喜欢像这样在本地化代码中使用较短的名称。由于数据属性是 data-lat 和 data-lng 并且 Maps API 函数称为 LatLng，因此拼写出来几乎没有什么用处user_latitude 和 user_longitude 在这段代码中。 lat 和 lng 是 Maps API 代码中非常标准的术语。

第二个问题是此代码中的无效 icon 对象:

var marker = new google.maps.Marker({
    map: map,
    position: currentlatlng,
    icon: { opacity: 0 }
});

一个icon 对象需要一个url，并且没有opacity 选项这样的东西。如果您删除 icon: { opacity: 0 } 并修复 lat/lng 问题，则 map 将正确加载。

如果您想要一个没有图标的标记，一种方法是使用透明的 PNG 文件。您可以将此文件的副本下载到您的服务器:

https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png

然后更改这一行:

    icon: { opacity: 0 }

到:

    icon: 'path/to/1x1.png'

此代码中还有一个错误:

  var circle = new google.maps.Circle({
    map: map,
    fillOpacity: 0,
    strokeWeight: 2,
    strokeOpacity: 0.7,
    radius: 10000,
  });

radius 行末尾的最后一个逗号不应该存在。它只影响较旧的浏览器，如 IE7，但如果删除该逗号，则 map 在 IE7 中加载正常。

另外，关于使用这个:

$(document).on("ready", function(){...});

而不是这个:

$(function(){...});

没有任何区别的原因是他们做同样的事情!