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)

%7B主链接转到 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 }并修复纬度/经度问题，那么 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(){...});

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