jQuery Google Maps v3 - 未捕获的类型错误：无法读取未定义的属性“标记”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16816026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 - Uncaught TypeError: Cannot read property 'Marker' of undefined
提问by martincarlin87
I have my map divcontainer always on the page:
我的地图div容器总是在页面上：
<div id="map_canvas"></div>
at first I was trying to append this to the DOM in the ajax callback aswell but was having troubles so decided to make it static for now.
起初我试图将它附加到 ajax 回调中的 DOM 中，但遇到了麻烦，所以决定暂时将其设为静态。
I am trying to initialise the map from a jquery ajax callback
我正在尝试从 jquery ajax 回调初始化地图
...
complete: function(data) {
// build the map
$.getScript("http://maps.google.com/maps/api/js?v=3&libraries=geometry&sensor=false®ion=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);
}
I also have the following outside of the document ready function
除了文档就绪功能之外，我还有以下功能
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'
});
}
The error message I am getting is Uncaught TypeError: Cannot read property 'Marker' of undefined.
我收到的错误消息是Uncaught TypeError: Cannot read property 'Marker' of undefined。
The full expanded message is
完整的扩展消息是
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`
回调`
回答by geocodezip
You are trying to use the Google Maps API constructor for a google.maps.Marker before the API is loaded.
您正在尝试在加载 API 之前将 Google Maps API 构造函数用于 google.maps.Marker。
Update: the setMarkers function is running before the API is loaded.
更新：setMarkers 函数在 API 加载之前运行。
回答by e4c5
Apparently this is a bug in the new Google Maps update. It only seems to effect those users who have the new version of maps. For them, the marker will not show up even on the google api code sample: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
显然这是新的谷歌地图更新中的一个错误。它似乎只影响那些拥有新版地图的用户。对于他们来说，即使在 google api 代码示例中也不会显示标记：https: //developers.google.com/maps/documentation/javascript/examples/marker-simple
The developer console will have the Uncaught TypeError: Type error
开发者控制台将出现 Uncaught TypeError: Type error
if you logout of google and visit the same page, you are most likely to see the marker
如果您退出谷歌并访问同一页面，您最有可能看到该标记
回答by EJ207
I solved this because I was missing geometry from the end of this url
我解决了这个问题，因为我在这个 url 的末尾缺少几何图形
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
回答by Sidius
if you do not have a business account, it could also give you this error which comes from this response of the server:
如果您没有企业帐户，它也可能给您这个来自服务器响应的错误：
{
"error_message" : "You have exceeded your rate-limit for this API.",
"results" : [],
"status" : "OVER_QUERY_LIMIT"
}
Which means that either you load the api too many times a day/too concentrated or that you try to load many addresses. Check the server response and see if you get it.
这意味着要么您一天加载 api 的次数过多/过于集中，要么您尝试加载许多地址。检查服务器响应，看看你是否得到它。
This particular response will also cause this error.
此特定响应也会导致此错误。
Uncaught TypeError: Cannot read property 'geometry' of undefined
Here you can find some tips that might help. https://developers.google.com/maps/documentation/business/articles/usage_limits
在这里您可以找到一些可能有帮助的提示。https://developers.google.com/maps/documentation/business/articles/usage_limits
回答by Amber Haq Dixon
I think you need to load the JS google maps API using a "script" tag, NOT using $.getScript.
我认为您需要使用“脚本”标签加载 JS 谷歌地图 API，而不是使用 $.getScript。
According to the jQuery API docs (http://api.jquery.com/jQuery.getScript/), getScript loads a JavaScript file from the server using a GET HTTP request, then executes it.
根据 jQuery API 文档 ( http://api.jquery.com/jQuery.getScript/)，getScript使用 GET HTTP 请求从服务器加载 JavaScript 文件，然后执行它。
This is probably not the right way of loading the Gmaps JS API. Note that the documentation for the GMaps API says, "The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API. This script tag is required. ... To [asynchronously load the JS API], you can inject your own tag in response to a window.onload event or a function call, but you need to additionally instruct the Maps JavaScript API bootstrap to delay execution of your application code until the Maps JavaScript API code is fully loaded. You may do so using the callback parameter, which takes as an argument the function to execute upon completing loading the API."
这可能不是加载 Gmaps JS API 的正确方法。请注意，GMaps API 的文档说：“脚本标签中包含的 URL 是 JavaScript 文件的位置，该文件加载了使用 Google Maps API所需的所有符号和定义。此脚本标签是必需的...... . 要[异步加载 JS API]，您可以注入自己的标记以响应 window.onload 事件或函数调用，但您需要额外指示 Maps JavaScript API 引导程序延迟执行应用程序代码，直到 Maps JavaScript API 代码已完全加载。您可以使用回调参数执行此操作，该参数将在完成加载 API 后执行的函数作为参数。”
You can see the gmaps API docs here: https://developers.google.com/maps/documentation/javascript/tutorial
您可以在此处查看 gmaps API 文档：https: //developers.google.com/maps/documentation/javascript/tutorial
In my case, I did the following. Note that the callback parameter is required for this to work:
就我而言，我做了以下工作。请注意，此操作需要回调参数：
function initializeGmaps() {}
$(document).ready(function() {
$('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGmaps"><\/script>');
});
