2

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

Uncaught TypeError: Cannot read property 'Fa' of undefined

但是看到我的应用程序加载正常，我可以在屏幕上、Chrome 和 Firefox 中看到所有内容，我只是忽略了它。我知道它与我的 Google 地图有关，因为当我在 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 问题，看起来很相似，它说确保在呈现页面之前加载了 javascript，所以我尝试像这样调用我的函数：

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

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


  });

但仍然得到同样的错误。

我打电话的谷歌地图库：

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

1 回答 1

3

我看到的第一个错误是您将字符串传递到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-latanddata-lng并且调用了 Maps API 函数，因此在这段代码中LatLng拼出user_latitudeand 并没有什么收获。并且是 Maps API 代码中的标准术语。user_longitudelatlng

第二个问题是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 中加载正常。

另外，关于使用这个：

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

而不是这个：

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

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

于 2013-07-03T11:57:31.067 回答