Question

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

Uncaught TypeError: Cannot read property 'Fa' of undefined

但看到我的应用程序加载正常，我可以在屏幕上看到所有内容，在Chrome和Firefox中，我只是忽略了它。我知道它与我的谷歌地图有关，因为当我在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中尝试了我的应用程序并且它出现了同样的错误 - 地图无法加载。知道什么可能是错的，我怎么能解决它？

这是我的功能：

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地图库：

 <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 );

让我看看你的其余代码，但这是立即修复的一件事。

BTW就像一个风格的建议，你可以看到我更喜欢这样的本地化代码中的短名称。由于数据属性为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问题，则地图将加载而不会出错。

如果您想要一个没有图标的标记，一种方法是使用透明的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这样的旧浏览器，但如果删除了这个逗号，则地图会在IE7中加载OK。

另外，关于使用它：

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

而不是：

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

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

Google Maps Uncaught TypeError

1 个答案: