Google Maps API 灰屏 - 嘗試了一切
[英]Google Maps API grey screen - tried everything
問題描述
我正在分析待售房屋，並試圖從和反對它們。 我嘗試使用其他帖子中的解決方案修改代碼，例如：更正縮放、坐標等，但沒有成功。 希望有人能解決這個問題，因為我已經做了一個多星期了。
我正在開發一個 Google Appscript WebApp，所以我不確定這是否是導致錯誤的原因。
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs&callback=displayMap"></script>
</head>
<body>
<div class= "map" id="map-display">
</body>
</html>
CSS
.map{
height: 400px;
width: 100%;
display: none; //initially hidden until the displayMap() function runs
}
Javascript
// other javascript code goes here that produces the `match` results in the next function
document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed
var mapDisplay = document.getElementById("map-display");
let map;
function displayMap(){
var match = {
address: "2126 Daly St"
baths: 1
beds: 2
built: 1910
city: "Los Angeles"
lat: 34.0702443
lon: -118.2152669
lotSize: 3920
mls: 820000258
price: 410000
ref: 573
state: "CA"
status: "Active"
url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566"
zip: 90031
}
var compsList = [
{address: "2315 Hancock St"
baths: 2
beds: 3
city: "Los Angeles"
lat: 34.0724244
lon: -118.2093106
lotSize: 5500
mls: "RS20015393"
price: 680000
ref: 1505
saleType: "PAST SALE"
sf: 1169
soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
state: "CA"
status: "Sold"
url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949"
zip: 90031
},
{address: "2333 Hancock St"
baths: 2
beds: 3
city: "Los Angeles"
lat: 34.0724248
lon: -118.2093112
lotSize: 5700
mls: "RS20015394"
price: 640000
ref: 1510
saleType: "PAST SALE"
sf: 1171
soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
state: "CA"
status: "Sold"
url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949"
zip: 90031
}
];
var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
var options = {
zoom: 8,
center: {lat: match.lat, lng: match.lon},
mapTypeId: "roadmap"
}
map = new google.maps.Map(mapDisplay, options);
var active = {
coords: {lat: match.lat, lng: match.lon},
content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"
}
addMarkers(active) //function should center the map around active and place the "compList" items with a beachflag
var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
var reformat = {
coords: {lat: c.lat, lng: c.lon},
content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",
icon: compIcon
}
return reformat
}).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center
mapDisplay.style.display = "inline-block";
}
function addMarkers(props){
var marker = new google.maps.Marker({
position: props.coords,
map: map
})
if(props.icon){
marker.setIcon(props.icon)
}
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener("click",function(){
infoWindow.open(map,marker);
})
}
當我在console上遇到錯誤時，我嘗試將鍵從center 、 position 、 content命名為setCenter 、 setPosition 、 setContent ，但我認為這是不對的，所以我已更改為 Google 文檔的方式。
我試過改變 div 的大小和overflow:display但什么也沒有。 任何其他想法可以幫助我做到這一點？ 我的控制台上沒有顯示任何錯誤，所以我沒有從 Google Maps API 得到任何反饋......
1 個解決方案
解決方案1
1 已采納 2020-09-05 06:26:41
@哈比22。 正如我在上面的評論中提到的，在您的選項中，您有“輸入”而不是“中心”。 在中心設置和坐標中，經度也使用 'lgn' 而不是 'lng'。
我還注意到您的 match 和 comp 對象缺少逗號，因此我將它們添加到我的示例中。
我還讀到您可以將緯度和經度作為字符串傳遞，然后轉換為解析為浮點數。 所以我也這樣做了。
我注釋掉了你的var comps = match.comps.map函數，因為我沒有看到 comps 的代碼。
編輯我根據反饋添加了此代碼，僅供將來參考並遵循 Bill & Ted 的卓越代碼。 ;)
我也沒有你點擊的代碼，所以我添加了一個 H2，你可以點擊它來顯示地圖。
不確定這是否是您要查找的內容，但這里什么也沒有：
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <base target="_top"> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs"></script> <style> .map{ height: 400px; width: 100%; display: none; /* initially hidden until the displayMap() function runs */ } </style> </head> <body> <h2 id="analysis">Display</h2> <div class= "map" id="map-display"></div> <script> // other javascript code goes here that produces the `match` results in the next function document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed let mapDisplay = document.getElementById("map-display"); let map; function displayMap(){ var match = { address: "2126 Daly St", baths: 1, beds: 2, built: 1910, city: "Los Angeles", lat: "34.0702443", lon: "-118.2152669", lotSize: 3920, mls: 820000258, price: 410000, ref: 573, state: "CA", status: "Active", url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566", zip: 90031, } var compsList = [ {address: "2315 Hancock St", baths: 2, beds: 3, city: "Los Angeles", lat: "34.0724244", lon: "-118.2093106", lotSize: 5500, mls: "RS20015393", price: 680000, ref: 1505, saleType: "PAST SALE", sf: 1169, soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)", state: "CA", status: "Sold", url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949", zip: 90031, }, {address: "2333 Hancock St", baths: 2, beds: 3, city: "Los Angeles", lat: "34.0724248", lon: "-118.2093112", lotSize: 5700, mls: "RS20015394", price: 640000, ref: 1510, saleType: "PAST SALE", sf: 1171, soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)", state: "CA", status: "Sold", url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949", zip: 90031, } ]; var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; var options = { zoom: 8, center: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)}, mapTypeId: "roadmap" } map = new google.maps.Map(mapDisplay, options); var active = { coords: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)}, content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>" } addMarkers(active) //function should center the map around active and place the "compList" items with a beachflag var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map var reformat = { coords: {lat: parseFloat(c.lat), lng: parseFloat(c.lon)}, content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>", icon: compIcon } return reformat }).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center mapDisplay.style.display = "inline-block"; } function addMarkers(props){ var marker = new google.maps.Marker({ position: props.coords, map: map }) if(props.icon){ marker.setIcon(props.icon) } if(props.content){ var infoWindow = new google.maps.InfoWindow({ content: props.content }); marker.addListener("click",function(){ infoWindow.open(map,marker); }) } } </script> </body> </html>
Google Maps api顯示灰屏
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.