谷歌地图V3 - 遗漏的类型错误：无法读取的不确定

  • Z时代
  • 2024-01-10
  • 分类：问答

财产“标记”我有我的地图div容器总是在页面上：谷歌地图V3 - 遗漏的类型错误：无法读取的不确定

<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

callback`

回答：

您试图加载API之前，使用谷歌地图API构造一个google.maps.Marker。

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

回答：

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

开发者控制台将有遗漏的类型错误：错误类型

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

回答：

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

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

这可能不是加载Gmaps JS API的正确方法。请注意，GMaps API的文档中说：“脚本标记中包含的URL是加载使用Google Maps API所需的所有符号和定义的JavaScript文件的位置。此脚本标记为必填项。 ...为了[异步加载JS API]，您可以注入自己的标签来响应window.onload事件或函数调用，但是您还需要指示Maps JavaScript API引导来延迟应用程序代码的执行，直到Maps JavaScript API代码已完全加载，您可以使用callback参数来完成此操作，该参数将完成加载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>'); 
});

回答：

我解决了这个，因为我缺少几何图形从这个网址

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>

回答：

结束时，如果你没有一个企业帐户，则还可以给你这种错误，来自服务器的这种反应：

{ 
"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

以上是 谷歌地图V3 - 遗漏的类型错误：无法读取的不确定 的全部内容， 来源链接： utcz.com/qa/258736.html

回到顶部