Javascript &引用；未捕获类型错误：无法读取属性'；长度'；“未定义”的定义；定义var之后

我目前正在加载一个json文件，然后对其进行解析。json文件中的条目存储为“places”，我将其定义为一个全局变量，但浏览器仍然表示它未定义

var request;
var places;
var map;
var myLatLng = {lat: 34, lng: 38};

// load database and parse into entries
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'places.json');
request.onreadystatechange = function() {
    if ((request.readyState ===4) && (request.status===200)) {
        places = JSON.parse(request.responseText);
    }
}
request.send();

function initMap() {
    var mapOptions = {
        zoom: 6,
        center: myLatLng,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    // initialize the map
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    for (var i = 0; i < places.length; i++) {
        // the place
        var place = places[i];
        // place co-ordinates
        var latlng = new google.maps.LatLng(place.latitude, place.longitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map, 
            title: place.city
        });
    }
}

var请求；
变量位置；
var映射；
var Mylatng={lat:34，lng:38}；
//加载数据库并解析为条目
if（window.XMLHttpRequest）{
请求=新的XMLHttpRequest（）；
}否则{
请求=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
open（'GET'，'places.json'）；
request.onreadystatechange=函数（）{
if（（request.readyState==4）和&（request.status==200））{
places=JSON.parse（request.responseText）；
}
}
request.send（）；
函数initMap（）{
变量映射选项={
缩放：6，
中心：myLatLng，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
位置：google.maps.ControlPosition.TOP\u右
},
mapTypeId:google.maps.mapTypeId.HYBRID
};
//初始化映射
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
对于（变量i=0；i

乔纳森·洛诺夫斯基（Jonathan Lonowski）和沙申克（Shashank）的评论是您面临的问题最可能的原因。您需要确保在AJAX调用完成后调用

initMap

。因此，您可以将

onreadystatechanged

方法修改为如下内容：

request.onreadystatechange = function() {
    if ((request.readyState ===4) && (request.status===200)) {
        places = JSON.parse(request.responseText);
        initMap();
    }

不过，我还想用Javascript术语澄清

undefined

的概念

在Javascript中，当一个变量被声明（但没有赋值）时，它被设置为

未定义的值。请注意，
undefined
与
null
相同，后者更像是赋值

回答将明确
未定义
和
空
之间的混淆。然后，您将能够理解为什么浏览器将变量位置显示为
undefined

根据OP的评论进行编辑如果您是从HTML文件调用该方法，仍然有一种方法可以使页面正常运行，但延迟可以忽略不计

请参考我在下面提出的备选解决方案

var request;
var places;
var map;
var myLatLng = {lat: 34, lng: 38};

// load database and parse into entries
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'places.json');
request.onreadystatechange = function() {
    if ((request.readyState ===4) && (request.status===200)) {
        places = JSON.parse(request.responseText);
        //now that the places array has been initialized you can call
        //placeMarkers() to place markers on the map.
        placeMarkers();
    }
}
request.send();

//initMap can be safely invoked within the HTML page using window.onload.
//this only initializes the map instance and sets it to a valid reference.
//there are *no* place markers added yet
function initMap() {
    var mapOptions = {
        zoom: 6,
        center: myLatLng,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    // initialize the map. Here map should be the global variable and not a new declaration
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function placeMarkers(){

    for (var i = 0; i < places.length; i++) {
        // the place
        var place = places[i];
        // place co-ordinates
        var latlng = new google.maps.LatLng(place.latitude, place.longitude);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map, 
            title: place.city
        });
    }
}

var请求；
变量位置；
var映射；
var Mylatng={lat:34，lng:38}；
//加载数据库并解析为条目
if（window.XMLHttpRequest）{
请求=新的XMLHttpRequest（）；
}否则{
请求=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
open（'GET'，'places.json'）；
request.onreadystatechange=函数（）{
if（（request.readyState==4）和&（request.status==200））{
places=JSON.parse（request.responseText）；
//现在，places数组已经初始化，您可以调用
//placeMarkers（）在地图上放置标记。
地点标记（）；
}
}
request.send（）；
//可以使用window.onload在HTML页面中安全地调用initMap。
//这只会初始化映射实例并将其设置为有效引用。
//尚未添加*无*位置标记
函数initMap（）{
变量映射选项={
缩放：6，
中心：myLatLng，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
位置：google.maps.ControlPosition.TOP\u右
},
mapTypeId:google.maps.mapTypeId.HYBRID
};
//初始化映射。这里的映射应该是全局变量，而不是新的声明
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
}
函数placeMarkers（）{
对于（变量i=0；i
我认为您忘记添加错误日志了……这可能意味着
initMap（）
在请求
places.json
实际完成并分配
places
之前被调用。您还可以分享如何使用
initMap
？相关：您忘记在
onreadystatechange
函数中调用
initMap
。@JonathanLonowski，谢谢您的帮助，我实际上在html文件中调用了该函数。@Shashank，谢谢你的帮助，我刚修好！实际上，我在html文件中调用了该函数。非常感谢你！我刚刚意识到这是多么的不同。问题解决了！即使如此，在开始向地图添加标记之前，仍然需要确保AJAX调用已经完成。请参考我的答案以获得替代解决方案谢谢你的建议！真的很感激@维克多：如果我的回答帮助你解决了你的问题，那么请你将其标记为答案