0

我的地图div容器总是在页面上：

<div id="map_canvas"></div>

起初我也试图在 ajax 回调中将其附加到 DOM 中，但遇到了麻烦，所以决定暂时将其设为静态。

我正在尝试从 jquery ajax 回调初始化地图

...
complete: function(data) {
    // build the map
    $.getScript("http://maps.google.com/maps/api/js?v=3&libraries=geometry&sensor=false&region=uk&async=2&callback=MapApiLoaded", function () {});     
    running = false;

    if(running) return false;
    running = true;
    setMarkers();
    flightPath.setMap(null); // Remove polyline
    flightPathProgress.setMap(null); // Remove polyline

    setTimeout(function() {
        flightPath.setMap(map);
        flightPathProgress.setMap(map);
        flightPathProgress.setOptions({
            strokeOpacity: 0
    });

    var progress = 0;
    var intvl = setInterval(function(){
        progress += 0.01;
        if(progress > 1) { 
            clearInterval(intvl);
            running = false;
         } else {

         }

         // Calc progress
         var progressLatLng = google.maps.geometry.spherical.interpolate(userlatlng, serverlatlng, progress);
         // Update polyline
         flightPathProgress.setOptions({
             strokeOpacity: progress,
             path: [userlatlng, progressLatLng]
         });
     }, 50);
     }, 1000);
 }

我在文档准备功能之外还有以下内容

var map;
var serverlatlng;
var userlatlng;
var servermarker;
var usermarker;
var flightPath;
var flightPathProgress;
var running;

function MapApiLoaded() {
    serverlatlng = new google.maps.LatLng(34.0625, -118.123);
    userlatlng = new google.maps.LatLng(54.167, -4.48211);
    var centerlatlng = new google.maps.LatLng(44.0835, -61.241055);

    // Create the map
    var myOptions = {
        center: centerlatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        panControl: false,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false
     };

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

     // Centre map on user and server locations
     var bounds = new google.maps.LatLngBounds();
     bounds.extend(serverlatlng);
     bounds.extend(userlatlng);
     map.fitBounds(bounds);

     // The grey outline path
     flightPath = new google.maps.Polyline({
         path: [userlatlng,serverlatlng],
         strokeColor: "#666",
         strokeOpacity: 0.5,
         strokeWeight: 4,
         geodesic: true,
         zIndex: 1
      });

      // The red progress path
      flightPathProgress = new google.maps.Polyline({
          path: [userlatlng,userlatlng],
          strokeColor: "#ff0000",
          strokeOpacity: 0,
          strokeWeight: 4,
          geodesic: true,
          zIndex: 2
      });
}

function setMarkers() {
    if(servermarker != undefined) servermarker.setMap(null); // Remove marker if exists
    servermarker = new google.maps.Marker({
    position: serverlatlng, 
    map: map, 
    title:"Server",
    animation: google.maps.Animation.DROP,
    icon: 'images/marker.png'
});  

    if(usermarker != undefined) usermarker.setMap(null); // Remove marker if exists
    usermarker = new google.maps.Marker({
        position: userlatlng, 
        map: map, 
        title:"User",
        animation: google.maps.Animation.DROP,
        icon: 'images/marker.png'
    }); 
}

我收到的错误消息是Uncaught TypeError: Cannot read property 'Marker' of undefined.

完整的扩展消息是

Uncaught TypeError: Cannot read property 'Marker' of undefined     
www.domain.co.uk/:345
setMarkers www.domain.co.uk/:345
$.ajax.complete www.domain.co.uk/:242
fire jquery.js:3064
self.fireWith jquery.js:3176
done jquery.js:8259

回调`

4

5 回答 5

5

您正在尝试在加载 API 之前将 Google Maps API 构造函数用于 google.maps.Marker。

更新：在加载 API 之前 setMarkers 函数正在运行。

于 2013-05-29T14:15:12.490 回答
5

显然这是新的谷歌地图更新中的一个错误。它似乎只影响那些拥有新版本地图的用户。对于他们来说，即使在 google api 代码示例中也不会显示标记：https ://developers.google.com/maps/documentation/javascript/examples/marker-simple

开发者控制台会出现 Uncaught TypeError: Type error

如果您退出谷歌并访问同一页面，您最有可能看到标记

于 2013-06-01T05:54:17.630 回答
5

我解决了这个问题，因为我在这个网址的末尾缺少几何图形

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
于 2014-08-01T18:13:06.550 回答
1

如果您没有企业帐户，它也可能会给您这个来自服务器响应的错误：

{
 "error_message" : "You have exceeded your rate-limit for this API.",
 "results" : [],
 "status" : "OVER_QUERY_LIMIT"
}

这意味着您每天加载 api 的次数过多/过于集中，或者您尝试加载许多地址。检查服务器响应，看看你是否得到它。

此特定响应也会导致此错误。

Uncaught TypeError: Cannot read property 'geometry' of undefined

在这里，您可以找到一些可能会有所帮助的提示。https://developers.google.com/maps/documentation/business/articles/usage_limits

于 2015-10-09T10:19:22.133 回答
0

我认为您需要使用“脚本”标签加载 JS 谷歌地图 API，而不是使用 $.getScript。

根据 jQuery API 文档 ( http://api.jquery.com/jQuery.getScript/ )，getScript 使用 GET HTTP 请求从服务器加载一个 JavaScript 文件，然后执行它。

这可能不是加载 Gmaps JS API 的正确方式。请注意，GMaps API 的文档说：“脚本标签中包含的 URL 是 JavaScript 文件的位置，该文​​件加载了使用 Google Maps API 所需的所有符号和定义。这个脚本标签是必需的...... . 要[异步加载 JS API]，您可以注入自己的标签以响应 window.onload 事件或函数调用，但您需要另外指示 Maps JavaScript API 引导程序延迟执行您的应用程序代码，直到 Maps JavaScript API 代码已完全加载。您可以使用回调参数来执行此操作，该参数将在完成加载 API 时执行的函数作为参数。

您可以在此处查看 gmaps API 文档：https ://developers.google.com/maps/documentation/javascript/tutorial

就我而言，我做了以下事情。请注意，此操作需要回调参数：

function initializeGmaps() {}
$(document).ready(function() {
  $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGmaps"><\/script>'); 
});
于 2013-10-24T23:48:27.137 回答