Question

正在进行ajax调用以检索json数据

然后我将已检索的数据存储到关联数组中

但是当我尝试从关联数组中获取数据时，其中的键和值是未定义的我猜它是因为数据被存储为值[i]，并且随着循环结束它不再知道我是什么，我该如何解决这个问题？

可以在此页面上看到http://www.focus-on-plants.com/locator_iconed.php 这是我的剧本

myUrl = 'geo_locator_icons.php';// url of php page that retrives the locations
    // start a new ajax call
    $.ajax({  
        type: "GET", //The type of HTTP verb (post, get, etc)  
        url: myUrl, //The URL from the form element where the AJAX request will be sent  
        dataType: 'json',
        success: function(dat) { //Triggered after a successful response from server    
            var myData = dat.icons;
            var count = myData.length - 1;
            console.log(dat)
            console.log(myData)

            for(i=0; i < count; i++){
                // Creating the icon 
                var icon_image = "'"+myData.folder_ico+myData.image_ico+"'" //set image
                var icon_size = "new google.maps.Size"+myData.iconsize_ico //set size
                var icon_origin = "new google.maps.Point(0, 0)" // The origin
                var icon_anchor = "new google.maps.Point"+myData.iconanchor_ico //set anchorpoint
                // Creating the shadow
                var shadow_image = "'"+myData.folder_ico+myData.shadow_ico+"'" //set image
                var shadow_size = "new google.maps.Size"+myData.shadowsize_ico //set size
                var shadow_origin = null // The origin
                var shadow_anchor = "new google.maps.Point"+myData.iconanchor_ico //set anchorpoint
                // Creating the shape
                var shape_type = 'poly'
                var shape_coord = myData.imagemap_ico
                // Creating the icon
                var icon = new google.maps.MarkerImage(icon_image);
                // Creating the shadow
                var shadow = new google.maps.MarkerImage(
                    shadow_image,
                    shadow_size,
                    shadow_origin,
                    shadow_anchor
                );
                // Creating a shape
                var shape = '{type: '+shape_type+', coord:'+shape_coord+'}'

                // add the icon to the mapIconsArray
                iconImageArray[myData.name_ico] = new google.maps.MarkerImage(
                    icon_image,
                    icon_size,
                    icon_origin,
                    icon_anchor
                );
                // add the icon to the shadowIconsArray
                iconShadowArray[myData.name_ico] = new google.maps.MarkerImage(
                    shadow_image,
                    shadow_size,
                    shadow_origin,
                    shadow_anchor
                );
                // add the shape to the shapeIconsArray
                iconShapeArray[myData.name_ico] = shape
            };
        },
        error: function(dat) { //Triggered if an error communicating with server   
            $("#geo_detail").append('<label>There was an error retriving the Icons: '+dat+'<label><br>');
            $('#loc_button').fadeIn('slow');
            return 0;
        },  
    });
    console.log(iconImageArray)
    console.log(iconShadowArray)
    console.log(iconShapeArray)

＆lt; -----------------------更新我想要实现的目标-------------- ------＆GT;

在地图初始化后加载页面时，createIcons()函数将运行。

我希望它将数据存储到我创建的3个数组（现在的对象）中

var iconImageArray = {}; var iconShadowArray = {}; var iconShapeArray = {};

我有一个名为addMarkers()的函数，它向地图添加标记我希望能够根据添加的标记类型更改标记图像。

添加标记脚本：

// ADD MARKER FUNCTION
// Adds a marker to the map
// PARAMS: 
// @myLatrLng - latLng object
// @dat - Data containg location Info
function addMarker(map, myData){
    // Create the marker
    // create the marker info first
    myLatLng = new google.maps.LatLng(myData.lat_mdt, myData.lng_mdt);
    markersArray.push(myLatLng);
    markersInfoArray.push(myData);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
    title: myData.name_mdt,
    icon: iconImageArray[myData.name_etp],
    shadow: iconShadowArray[myData.name_etp],
    shape: iconShapeArray[myData.name_etp],
   });

   // Wrapping the event listener inside an anonymous function
   // that we immediately invoke and passes the variable i to.
   (function(myData, marker) {
       // Creating the event listener. It now has access to the values of
       // myData and marker as they were during its creation
       google.maps.event.addListener(marker, 'click', function() {
       //create thecontent for the infowindow
       var content = createContent(myData);
       var infowindow = new google.maps.InfoWindow({
           content: content
       });
       infowindow.open(map, marker);
    });
})(myData, marker);             
};

＆LT; ----------------------更新---------------------- -------------＆GT;

这就是我所在的地方，我已经完成了大量的静态数据测试，并且地图的图标生成正常，所以我的实际谷歌地图代码还可以正常工作。

一旦我开始尝试引用myIconsArray object中的项目，它就会中断并且我没有收到addMarkers function中设置的控制台消息。

我确实注意到当我在控制台中查看myIcons Array thwe结构看起来不正确时：

在myIconsArray中我有3个对象，图标{} shadow {}，shape {}

形状似乎没问题;像这样：形状{ 兰花日{ 坐标{} 类型{} } stokist { 坐标{} 类型{}

} 
website visitor{
    coord{} 
    type{}

}

}

但是图像和阴影对象的名称错误如下：

图像{ 兰花日{ Na {} //应该是大小（值是正确的） anchor {} // shoule be anchorpoint（value是正确的） b {}应该是原点（值是正确的） hb {} //应该是图像（值是正确的） hc {}不知道为什么这里是未定义的并且我没有使用!!! } stokist { 坐标{} 类型{}

} 
website visitor{
    coord{} 
    type{}

}

}

Answer 1

最后3 console.log()显示未定义，因为它们在从请求收到响应之前运行。

任何依赖于AJAX响应的代码都需要放在success:回调中（或从中调用）。

因此，请尝试将它们移至success:回调的末尾：

 success: function(dat) { 
       ...
        // add the icon to the shadowIconsArray
        iconShadowArray[myData.name_ico] = new google.maps.MarkerImage(
            shadow_image,
            shadow_size,
            shadow_origin,
            shadow_anchor
        );
        // add the shape to the shapeIconsArray
        iconShapeArray[myData.name_ico] = shape
    };
    console.log(iconImageArray)
    console.log(iconShadowArray)
    console.log(iconShapeArray)
 }, 
 error: func...

编辑：其他问题是，i变量未被用于获取数组当前迭代中项目的值，如myData[ i ].name_ico < / p>

存储在关联数组中的值是未定义的

1 个答案: