javascript 显示空白地图的 Google Maps API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18509973/
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 API showing blank map
提问by bencarter78
I'm sure this is a basic problem but I've hit my head against the wall too many times now, so hopefully someone will take pity on me!
我敢肯定这是一个基本问题，但我现在已经把头撞到墙上太多次了，所以希望有人能同情我！
I have the following example but all it does is show a grayed out box, no map at all. Can anyone tell me why?
我有以下示例，但它所做的只是显示一个灰色框，根本没有地图。谁能告诉我为什么？
I've checked that I'm actually returning a result and it seems to be working fine.
我已经检查过我实际上正在返回结果并且它似乎工作正常。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map-canvas {margin: 0;padding: 0;height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize()
{
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': "England"}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(results[0].geometry.location),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Let's draw the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
</head>
<body onload="">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>
采纳答案by putvande
results[0].geometry.locationis already a latLng object so you can just say:
results[0].geometry.location已经是一个 latLng 对象，所以你可以说：
center: results[0].geometry.location
Find the working fiddle here : http://jsfiddle.net/87z9K/
在这里找到工作小提琴：http: //jsfiddle.net/87z9K/
回答by Anurag
Try resizing the browser window, give a shake to browser/drag it from browser tab with the cursor and you will see the map appearing.
尝试调整浏览器窗口的大小，摇晃浏览器/用光标从浏览器选项卡中拖动它，您将看到地图出现。
From some strange reason in MVC partial view google map comes as blank, your map is working it just need to be resized.
由于 MVC 部分视图谷歌地图中的一些奇怪原因，谷歌地图显示为空白，您的地图正在工作，只需调整大小即可。
Shaking a browser window with cursor sounds funny, but it works and I am not sure how to best describe it.
用光标摇动浏览器窗口听起来很有趣，但它有效，我不知道如何最好地描述它。
Thanks, Anurag
谢谢，阿努拉格
=======================================================================
================================================== ======================
my final working code is below:
我的最终工作代码如下：
`
`
<script type="text/javascript">
$(document).ready(function () {
(function () {
var options = {
zoom: 6,
center: new google.maps.LatLng(-2.633333, 37.233334),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var arrLocation = [];
$("#markerDiv").find("div").each(function () {
var Lat = $(this).find("input[id='Latitude']").val();
var Lon = $(this).find("input[id='Longitude']").val();
var Id = $(this).find("input[id='Id']").val();
var AssessmentDet = $(this).find("input[id='AssessmentDateTime']").val();
var LocAcc = $(this).find("input[id='LocationAccuracy']").val();
var assessorName = $(this).find("input[id='AssessorName']").val();
var partnerName = $(this).find("input[id='PartnerName']").val();
arrLocation.push({
Id: Id,
Latitude: Lat,
Longitude: Lon,
AssessmentDate: AssessmentDet,
LocationAccuracy: LocAcc,
AssessorDetail: assessorName,
PartnerName: partnerName
});
});
var allMarkers = [];
for (var i = 0; i < arrLocation.length; i++) {
//final position for marker, could be updated if another marker already exists in same position
var latlng = new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude);
var finalLatLng = latlng;
var comparelatlng = "(" + arrLocation[i].Latitude + "," + arrLocation[i].Longitude + ")";
var copyMarker = arrLocation[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude),
map: map,
title: 'Equine # ' + arrLocation[i].Id,
icon:"abc.png"
});
var markerInfo = "Reference # : <b>" + arrLocation[i].Id + "</b><br/>";
markerInfo = markerInfo + "Assessor : <b>" + arrLocation[i].AssessorDetail + "</b><br/>";
markerInfo = markerInfo + "Date : <b>" + arrLocation[i].AssessmentDate + "</b><br/>";
markerInfo = markerInfo + "Partner : <b>" + arrLocation[i].PartnerName + "</b>";(function (marker, i) {
bindInfoWindow(marker, map, new google.maps.InfoWindow(), markerInfo);
})(marker, i);
}
})();
});
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
</script>
`
`
回答by Amigo
It is because of the worng "google.maps.LatLng" provided. provide for a test the coords and it will work. replace the line
这是因为提供了“google.maps.LatLng”。提供测试坐标，它将起作用。更换线
center: new google.maps.LatLng(results[0].geometry.location),
with
和
center: new google.maps.LatLng(-34.397, 150.644)
get England coords
获取英格兰坐标
回答by Debs
This can also occur if the height/width of the map is 0.
如果地图的高度/宽度为 0，也会发生这种情况。
回答by andrewb
It wasn't exactly your issue, but closely related.
这不完全是你的问题，但密切相关。
I found that I had to set the mapOptions with a valid centre, like so:
我发现我必须使用有效的来设置 mapOptions centre，如下所示：
new google.maps.Map(mapCanvas, {
center: new google.maps.LatLng(-34.397, 150.644)
});
If I didn't enter map options, or if I did and it didn't have a valid centerset, I'd get a blank map that didn't load tiles.
如果我没有输入地图选项，或者如果我输入了但它没有有效的center设置，我会得到一张没有加载图块的空白地图。
回答by Padrig
I can see a general javascript issue with your code.
我可以看到您的代码存在一般的 javascript 问题。
Your script might trying to embed the map in the page before the HTML is loaded.
您的脚本可能会在加载 HTML 之前尝试将地图嵌入到页面中。
Call the function like this (there are other ways).
像这样调用函数（还有其他方法）。
<body onload="initialize()">
