Javascript 谷歌地图错误：a 为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5478450/
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 map error: a is null
提问by Stanley Cup Phil
I have a program that I want to use google maps for. The problem is I get an error that says a is null where a is a var used in the google map api. Here is how I call my google map:
我有一个要使用谷歌地图的程序。问题是我收到一个错误，说 a 为空，其中 a 是谷歌地图 api 中使用的 var。这是我如何称呼我的谷歌地图：
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);
//The options for the google map
var myOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
And here is what my HTML tag looks like:
这是我的 HTML 标签的样子：
<div id = "map_canvas"></div>
I get the lat and lng on page load through the url. These values are passed in correctly so I know that is not the problem. I think that it has to do with the var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);not being correct. Any suggestions?
我通过 url 获取页面加载的 lat 和 lng。这些值被正确传递，所以我知道这不是问题。我认为这与var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);不正确有关。有什么建议？
EDIT: Here is the error message:
编辑：这是错误消息：
a is null fromLatLngToPoint(a=null) yg(a=null, b=Object { zoom=7, maxZoom=12, more...}) d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f=[function()]) d(a=undefined) d() [Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}
a 为空 fromLatLngToPoint(a=null) yg(a=null, b=Object { zoom=7, maxZoom=12, more...}) d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f =[function()]) d(a=undefined) d() [Break On This Error] function Qf(a){a=af[9];return a!=i?a:...);function sg (a){a[ic]&&a[ic]Vb}
回答by Michal
Make sure you specify the size of the element that holds the map. For example:
确保指定保存地图的元素的大小。例如：
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
Also make sure your map variable is defined in the global scope and that you initialize the map once the DOM is loaded.
还要确保您的地图变量在全局范围内定义，并且在加载 DOM 后初始化地图。
回答by Travis Webb
You are probably not listening for the onloadevent that fires when the page is completely loaded. As a result, your script is running but the divyou are creating doesn't yet exist. Use jQuery to listen for this event, like so:
您可能没有监听onload页面完全加载时触发的事件。因此，您的脚本正在运行，但div您正在创建的脚本尚不存在。使用 jQuery 来监听这个事件，像这样：
$(document).ready(function () {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
If you don't want to use jQuery, then add an event listener to body.onload
如果你不想使用 jQuery，那么添加一个事件监听器到 body.onload
回答by superluminary
This rather cryptic error means that the script can't find the map div. This could happen for a couple of reasons.
这个相当神秘的错误意味着脚本找不到地图 div。这可能有几个原因。
1. You're using the wrong ID to refer to the map.
1. 您使用错误的 ID 来引用地图。
Check your ids (or classes) and make sure the element you're referring to actually exists.
检查您的 id（或类）并确保您所指的元素确实存在。
2. You're executing the script before the DOM is ready.
2. 您在 DOM 准备好之前执行脚本。
Here's a jQuery example. Notice we're triggering initialise on document ready, not onDOMReady. I've taken the liberty of wrapping the script in a closure.
这是一个 jQuery 示例。请注意，我们在文档就绪时触发初始化，而不是 onDOMReady。我冒昧地将脚本包装在一个闭包中。
(function($) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
$(document).ready(initialize);
})(jQuery)
You could also use:
您还可以使用：
google.maps.event.addDomListener(window, 'load', initialize);
if you prefer a Google solution.
如果您更喜欢 Google 解决方案。
回答by Streamline
Had the exact same problem and this is have i fixed it for me.
有完全相同的问题，这是我为我修复的。
The thing was that I had 2 google maps in my website - one in the footer and the other one on the contact page, but i called them both in one JS file like so:
问题是我的网站上有 2 个谷歌地图 - 一个在页脚中，另一个在联系页面上，但我在一个 JS 文件中调用了它们，如下所示：
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
But the thing is that the object with id="map-canvas"was located only on the contact page.
So at first you have to check if that element exists on the page like so:
但问题是该对象id="map-canvas"仅位于联系页面上。因此，首先您必须检查页面上是否存在该元素，如下所示：
if ($("#map-canvas-footer").length > 0){
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
}
if ($("#map-canvas").length > 0){
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}
I hope this can help someone else as well ;)
我希望这也可以帮助其他人;)
回答by Nicolas Pinos
This happens when the map is not yet loaded. You should build your map when the Maps API JavaScript has loaded. Executing the function to initialize your map only when the API has fully loaded passing it to the "callback" parameter in the Maps API bootstrap.
当地图尚未加载时会发生这种情况。您应该在 Maps API JavaScript 加载后构建您的地图。仅当 API 完全加载时才执行函数以初始化您的地图，并将其传递给 Maps API 引导程序中的“回调”参数。
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
This is actually in the Maps API Docs here. Hope this helps!
这实际上在 Maps API Docs here 中。希望这可以帮助！
回答by Pupil
Make sure that your canvas div (Div associated with the map) exists. Sometimes, if we rename the div's id attribute. Then it creates problem as it does not get the canvas div.
确保您的画布 div（与地图关联的 Div）存在。有时，如果我们重命名 div 的 id 属性。然后它会产生问题，因为它没有得到画布 div。
回答by Rafael Cavalcante
I got this error once. Make sure the map script runs only on pages using the map. You can check if the map exists by using an "if". Something like this:
我有一次遇到这个错误。确保地图脚本仅在使用地图的页面上运行。您可以使用“if”检查地图是否存在。像这样的东西：
if ($('mapClass').length>0) { // here you run the google maps functions }
See ya
拜拜
回答by Fita
I have fixed it removing my "style" property from the "div" tag an declaring it correctly, in a css file
我已经修复了它从“div”标签中删除我的“样式”属性并在css文件中正确声明它
回答by Anoop P S
Solved, the google map type a error, make sure you get object var map = document.getElementById('map-canvas') returning properly using alert(map). Check the div container id name same as specified in getElementByid.
解决了，谷歌地图输入错误，确保使用alert(map)正确返回对象var map = document.getElementById('map-canvas')。检查与 getElementByid 中指定的 div 容器 id 名称相同的名称。
I have also stuck with the same type a error, fixed it by checking getElementByid('map-canvas'). Sample code enter link description here
我也遇到了相同类型的错误，通过检查 getElementByid('map-canvas') 修复了它。示例代码在此处输入链接描述
