问题描述
我正在分析待售房屋,并试图使房屋成为异议。我尝试使用其他帖子的解决方案来修改代码,例如:校正缩放,坐标等,但均未成功。希望有人可以解决这个问题,因为我已经呆了一个多星期了。
我正在使用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,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);
})
}
我尝试从center
,position
,content
到setCenter
,setPosition
,setContent
的键重命名console
出现错误,但我认为这是不对的,因此我已更改为Google文档的方式。
我尝试更改div和overflow:display
的大小,但没有任何改变。还有其他可以帮助我解决这个问题的想法吗?控制台上未显示任何错误,因此我没有收到Google Maps API的任何反馈...。
解决方法
@ haby22。正如我在上面的评论中所提到的,在您的选择中,您具有“输入”而不是“中心”。在中心设置和座标中,经度也用'lgn'代替'lng'。
我还注意到您的match和comp对象缺少逗号,因此我将其添加到示例中。
我还读到您可以将纬度和经度作为字符串传递,然后转换为浮点型解析。所以我也做到了。
我注释掉了您的var comps = match.comps.map
函数,因为看不到补偿代码。
编辑,我根据反馈添加了此代码,以供将来参考,并遵循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,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)",status: "Sold",url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949",},{address: "2333 Hancock St",lat: "34.0724248",lon: "-118.2093112",lotSize: 5700,mls: "RS20015394",price: 640000,ref: 1510,sf: 1171,soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)",url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949",}
];
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),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>