Google地图渲染问题？

-1

我刚开始使用google-maps-api，我认为它很棒。然而，在我的谷歌地图掌握的旅程中，我遇到了希望你们可以提供帮助的障碍。继google maps tutorial后，将js代码放入单独的文件中工作。但是，当我试图将代码分解成多个帮助器方法时，地图不会呈现。 Google Map not Rendering. 我想知道是否有页面加载的潜在错误，反正我已经包含了我的helper.js和map.js代码。任何提示或建议，以解决这个问题将不胜感激。谢谢！Google地图渲染问题？

这里是我的辅助功能：

/** 
* HELPER CLASS for google map api 
* Contains helpful methods for use in google maps 
* By: Christian Wang 
* Version 1.0 
**/ 

/** 
* Takes a geocoder object and returns the address in an array of latitude, longitude 
**/ 
function codeAddress(geocoder, address) { 
var latlng = []; 
geocoder.geocode({ 
    'address': address 
}, function(results, status) { 
    if (status == "OK") { 
     latlng[0] = results[0].geometry.location.lat(); 
     latlng[1] = results[0].geometry.location.lng(); 
    } else { 
     console.log('Geocode was not successful for the following reason: ' + 
status); 
    } 
    }); 
    return latlng; 
} 

/** 
* Reverse geocodes an array of latitude, longitude and returns an address 
**/ 
function getAddress(geocoder, latlng) { 
    var address = ""; 
    geocoder.geocode({ 
     'location': latlng 
    }, 
    function(results, status) { 
     if (status == "OK") { 
     address = results[0].formatted_address; 
     } else { 
     console.log('Geocode was not successful for the following reason: ' 
+ status); 
     } 
    }); 
    return address; 
} 

/** 
* Moves the map to the current location and sets the zoom level 
**/ 
function setLocation(geocoder, map, location, zoom) { 
    //Check if the location is an address or an array of latitude, longitude 
    if (typeof location === "string") { 
    //Check if geocoder is undefined 
    if (geocoder) { 
     map.setCenter(codeAddress(geocoder, location)); 
    } else { 
     console.log('Geocode object is undefined'); 
    } 
    } else { 
    map.setCenter(location); 
    } 

    //Check if zoom is undefined 
    if (zoom) { 
    map.setZoom(zoom); 
    } else { 
    console.log('Zoom is undefined'); 
    } 
} 
/** 
* Adds a marker on a given map at a given location 
**/ 
function addMarker(geocoder, map, location) { 
    //Check if the location is an address or an array of latitude, longitude 
    if (typeof location === "string") { 
    var marker = new google.maps.Marker({ 
     position: codeAddress(geocoder, location), 
     title: "Home", 
     map: map, 
     visible: true 
    }); 
    } else { 
    var marker = new google.maps.Marker({ 
     position: location, 
     title: "Home", 
     map: map, 
     visible: true 
    }); 
    } 
}

这里是我的主地图类：

/** 
* MAP CLASS for transportation app 
* Manages the rendering and event handling of google maps 
* By: Christian Wang 
* Version 1.0 
**/ 
function initMap() { 
    var geocoder, map; // Create new geocoder and map objects 
    geocoder = new google.maps.Geocoder(); 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3") 
    }); 
    setLocation(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3", 4); 
    addMarker(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3"); 

}

来源

2017-08-29 squishy123

很肯定你必须设置变焦，在你MapOptionsObject。 – PHPglue

我用我的帮助函数setLocation（）设置缩放。即使在实例化地图对象时直接设置缩放也不会渲染地图。谢谢！ – squishy123

geocode（）是其他代码在完成之前完成的异步方法。同样在codeAddress中，您正在执行geocode（）回调中的返回，而不是在codeAddress函数本身中。 [如何从异步调用返回响应？]（https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） –

它不会没有zoom渲染。我不知道你的代码的其余部分，但

map = new google.maps.Map(document.getElementById('map'), { 
    center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3") 
});

应该像

map = new google.maps.Map(document.getElementById('map'), { 
    center:codeAddress(geocoder, '34 Bracknell Avenue, Markham, ON, Canada, L6C0R3'), zoom:8) 
});

来源

2017-08-29 23:06:31 PHPglue

Google地图渲染问题？

回答

相关问题