jQuery访问html5数据元素中的JSON数据时，在访问键时返回undefined

嗨，我正试图得到一些引脚显示在谷歌地图时，图形被点击。 我将需要的所有数据存储在span标记上的数据位置元素中：

<span class="showOnMap" data-location="{"lat":"51.4894805","lng":"-0.2942533000000367","name":"Brentford Towers","addr":"Green Dragon Lane\r\nBrentford TW8 0DF","pinType":"loc"}">    <img width="32" height="32" src="/images/Icons/map-icon.png">
</span> 

创建标记的函数给我带来了一个问题，当我向它发出警报或尝试使用它创建标记时，传递给它的数据显示为未定义，但它确实显示在控制台中，但从我所读取的内容来看，控制台在这方面不可信，因为它将以当前状态显示数据，也就是说，在实际调用控制台时可能没有定义它

我不明白为什么它是未定义的，因为json数据在dom中（它实际上是由php生成的），所以它是在dom中定义的，如果我在进行Ajax调用，我可以理解为什么它可能是未定义的

function createMarkerWithInfo(myData){
        //console.log(myData);
        //coords = myData.latlng.split(','); 
        alert(myData + 'pinType: '+ myData.pinType + ' lat: '+ myData.lat + ' lng: ' +myData.lng);
        myLatLng = new google.maps.LatLng(myData.lat, myData.lng);  
        if(myData.pinType == 'loc'){
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: myData.name,     
                icon: locimage,
                shadow: locshadow,
                shape: locshape
            });
        }
        if(myData.pinType == 'ub'){
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: myData.name,     
                icon: ubimage,
                shadow: ubshadow,
                shape: locshape
            });
        }
        //alert('lat: '+myData.lat+','+'lng: '+myData.lng);
        // 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);
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });

        })(myData, marker);     
        markersArray.push(marker);
        markersPosArray.push(myLatLng);
        bounds.extend(myLatLng);
        map.fitBounds(bounds);
        zoomMarkers();
    }

是我正在处理的页面，奇怪的是我有一个类似的页面（使用php包含而不是独立的页面），它具有相同的功能，并且工作正常，我查看了两者，但看不出有什么不同，因为是什么导致它未定义）

---

出于某种原因，json被包装在

[]

标记中

alert（myData+'pinType:'+myData[0].pinType+'lat:'+myData[0].lat+'lng:'+myData[0].lng）

输出正确的值。
术语：您不需要对DOM进行Ajax调用。Ajax是服务器/客户端通信。从jQuery。DATA（doc）代码>关于HTML5数据-*属性：此低级方法不检索数据-*属性，除非更方便。DATA（）方法已经检索它们。< /代码>考虑当数据属性是对象（以{）或数组开始时（以'/'开始）。然后使用jQuery.parseJSON解析字符串；它必须遵循有效的JSON语法，包括带引号的属性名。数据属性在第一次访问数据属性时被拉入，然后不再被访问或修改（所有数据值都存储在jQuery内部）。
function createMarkerWithInfo(myData){
        //console.log(myData);
        //coords = myData.latlng.split(','); 
        alert(myData + 'pinType: '+ myData.pinType + ' lat: '+ myData.lat + ' lng: ' +myData.lng);
        myLatLng = new google.maps.LatLng(myData.lat, myData.lng);  
        if(myData.pinType == 'loc'){
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: myData.name,     
                icon: locimage,
                shadow: locshadow,
                shape: locshape
            });
        }
        if(myData.pinType == 'ub'){
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: myData.name,     
                icon: ubimage,
                shadow: ubshadow,
                shape: locshape
            });
        }
        //alert('lat: '+myData.lat+','+'lng: '+myData.lng);
        // 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);
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });

        })(myData, marker);     
        markersArray.push(marker);
        markersPosArray.push(myLatLng);
        bounds.extend(myLatLng);
        map.fitBounds(bounds);
        zoomMarkers();
    }