自 JSON 外部以来，使用 javascript 添加标记 googlemap

Question

外部 JSON：

{
    "playas": [
        {
            "nombre": "Laredo",
            "ubicacion": {
                "municipio": {
                    "nombre": "Laredo",
                    "codigoPostal": 39035
                },
                "latitud": 43.419746,
                "longitud": -3.453788
            },
            "descripcion": {
                "detalle": "De entorno urbano y de 5000 metros de extensión es la playa de Laredo con un alto grado de ocupación en la época estival.",
                "fondo": "Arena",
                "mar": "Fuerte",
                "vientos": [
                    {
                        "viento": "S"
                    },
                    {
                        "viento": "SO"
                    },
                    {
                        "viento": "NO"
                    }
                ],
                "marea": "Subiendo",
                "tamaño": "1-1.5",
                "olas": [
                    {
                        "nombre": "El Espigón",
                        "descripcion": "derecha potente con fondo de lastra"
                    },
                    {
                        "nombre": "La Playa",
                        "descripcion": "buenas derechas"
                    }
                ],
                "nivel": "medio"
            },
            "foto": "img/playas/laredo.jpg"
        },
        {
            "nombre": "Berria",
            "ubicacion": {
                "municipio": {
                    "nombre": "Santoña",
                    "codigoPostal": 39079
                },
                "latitud": 43.465348,
                "longitud": -3.450717
            },
            "descripcion": {
                "detalle": "Playa de aproximadamente 2 kilómetros de arena que se encuentra en un entorno semi-urbano mezclado con áreas verdes y pequeñas dunas. En verano mucha afluencia.",
                "fondo": "Arena",
                "mar": "Fuerte",
                "vientos": [
                    {
                        "viento": "S"
                    },
                    {
                        "viento": "SO"
                    },
                    {
                        "viento": "NO"
                    }
                ],
                "marea": "Subiendo",
                "tamaño": "1-1.5",
                "olas": [
                    {
                        "nombre": "Variables",
                        "descripcion": ""
                    }
                ],
                "nivel": "medio"
            },
            "foto": "img/playas/berria.jpg"
        },
        {
            "nombre": "El Brusco",
            "ubicacion": {
                "municipio": {
                    "nombre": "Noja",
                    "codigoPostal": 39047
                },
                "latitud": 43.476887,
                "longitud": -3.512989
            },
            "descripcion": {
                "detalle": "También llamado Helgueras y ubicado al final de la Playa de Trengandín. Se llega a través de un camino mal asfaltado desde Noja. Hay que caminar por la playa para ver su verdadero “poderío”. En verano mucha afluencia.",
                "fondo": "Arena",
                "mar": "Fuerte",
                "vientos": [
                    {
                        "viento": "S"
                    }
                ],
                "marea": "Subiendo",
                "tamaño": "2",
                "olas": [
                    {
                        "nombre": "Variables",
                        "descripcion": "Tanto derecha como izquierda potente. Rápidas y tuberas"
                    }
                ],
                "nivel": "experto"
            },
            "foto": "img/playas/elbrusco.jpg"
        },
        {
            "nombre": "Langre",
            "ubicacion": {
                "municipio": {
                    "nombre": "Ribamontán al Mar",
                    "codigoPostal": 39061
                },
                "latitud": 43.477961,
                "longitud": -3.695723
            },
            "descripcion": {
                "detalle": "Playa de unos 1.000 metros de longitud con un entorno de altos acantilados con accesos muy mejorados y en donde se practica al final de la playa el nudismo desde hace muchos años. Buen ambiente playero en verano.",
                "fondo": "Arena",
                "mar": "Medio",
                "vientos": [
                    {
                        "viento": "S"
                    },
                    {
                        "viento": "SO"
                    },
                    {
                        "viento": "E"
                    }
                ],
                "marea": "Subiendo",
                "tamaño": "1",
                "olas": [
                    {
                        "nombre": "Variables",
                        "descripcion": "divertido para pasar un buen rato, control para no llevarse a nadie por delante"
                    }
                ],
                "nivel": "bajo"
            },
            "foto": "img/playas/langre.jpg"
        }
    ]
}

以及我读取 JSON 并为每个对象添加带有纬度和经度的标记的 javascript

var READY_STATE_UNINITIALIZED = 0; //No inicializado objeto creado, pero no se ha invocado el metodo open
var READY_STATE_LOADING = 1; //Cargando objeto creado pero no se ha invocado el metodo send
var READY_STATE_LOADED = 2; //Cargado se ha invocado el metodo send, pero el servidor aún no ha respondido
var READY_STATE_INTERACTIVE = 3; //Interactivo se ha recibido algunos datos, aunque no se puede emplear la propiedad
var READY_STATE_COMPLETE = 4;//Se ha recibido todos los datos
var peticion_http;
var documento_json;
var playasJson = [];

function initialize() {
  

    var options = {
        zoom: 10,
        center: new google.maps.LatLng("43.597436","-3.653516"),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('contenedorMapa'), options);
    setMarkers(map,playasJson);
    
};


function rellenarJson(playas)
{
    //Preguntar a fernando poruqe tienen ubicacion0 si ordenados tienen posicion 0 y el otro 1
    for (var i = 0; i < playas.length; i++) {
        playasJson.push({ 
            nombre:playas[i].nombre,
            lat:playas[i].ubicacion.latitud,
            long:playas[i].ubicacion.longitud
        });                    
    }
}

// Obtener la instancia del objeto XMLHttpRequest
function inicializa_xhr() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        return new ActiveXObject("Msxml3.XMLHTTP");
    }
    else if (window.ActiveXObject) {
        return new ActiveXObject("Msxml2.XMLHTTP.6.0");
    }
    else if (window.ActiveXObject) {
        return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }
    else if (window.ActiveXObject) {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }
    else if (window.ActiveXObject) {
        return ActiveXObject("Microsoft.XMLHTTP");
    }
}


//Mostrar la info del json
function  muestraContenido() {
    if (peticion_http.readyState === READY_STATE_COMPLETE) {
        if (peticion_http.status === 200) {
            documento_json = peticion_http.responseText;
            var objeto = eval("(" + documento_json + ")");
            var playasObtenidas = objeto.playas;
            rellenarJson(playasObtenidas);
        }

    }
}

//Llamar al json en una variable y añadir funcion
function cargarContenido(url, metodo, funcion)
{
    peticion_http = inicializa_xhr();
    if (peticion_http)
    {
        peticion_http.onreadystatechange = funcion;
        peticion_http.open(metodo, url, true);
        peticion_http.send(null);
    }
}


function descargaArchivo() {
    cargarContenido("json/listadoPlayas.json", "GET", muestraContenido);
}


function setMarkers(map,playasArray) {
    descargaArchivo();
    for (var k = 0; k < playasArray.length; k++) {
        var beach = playasArray[k];
        var myLatLng = new google.maps.LatLng(beach.lat,beach.long);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            //icon: image,
            //shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}




google.maps.event.addDomListener(window, 'load', initialize);

和html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
        <script type="text/javascript" src="map_1.js"></script>
    </head>
    <body>
        <div id="contenedorMapa" style="width: 100%;height: 900px;">TODO write content</div>
    </body>
</html>

请有人知道为什么不起作用？我不知道为什么？？非常感谢！

Answer 1

如果那是服务器发回的 json，那么它的格式不正确。这可以解释为什么标记没有出现。您可以检查它的有效性here。

为了解决问题，添加

 ]
}

在你当前 json 的末尾。

我已经测试了您的代码，用我提到的修复程序替换了 json 字符串的 ajax 调用，它可以工作fiddle。

希望对你有帮助。

更新

问题在于，添加标记的函数在 AJAX 调用完成之前就被调用了很久（请记住，AJAX 是异步的）。这意味着当您添加标记时，数组中没有任何标记。一旦 AJAX 调用完成并且数组已正确填充，您必须调用添加标记的函数。

你可以这样做：

        var READY_STATE_UNINITIALIZED = 0; //No inicializado objeto creado, pero no se ha invocado el metodo open
        var READY_STATE_LOADING = 1; //Cargando objeto creado pero no se ha invocado el metodo send
        var READY_STATE_LOADED = 2; //Cargado se ha invocado el metodo send, pero el servidor aún no ha respondido
        var READY_STATE_INTERACTIVE = 3; //Interactivo se ha recibido algunos datos, aunque no se puede emplear la propiedad
        var READY_STATE_COMPLETE = 4;//Se ha recibido todos los datos
        var peticion_http;
        var documento_json;
        var playasJson = [];
        var map;

        function initialize() {


            var options = {
                zoom: 10,
                center: new google.maps.LatLng("43.597436", "-3.653516"),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('contenedorMapa'), options);
            descargaArchivo();
        }


        function rellenarJson(playas)
        {
            //Preguntar a fernando poruqe tienen ubicacion0 si ordenados tienen posicion 0 y el otro 1
            for (var i = 0; i < playas.length; i++) {
                playasJson.push({
                    nombre: playas[i].nombre,
                    lat: playas[i].ubicacion.latitud,
                    long: playas[i].ubicacion.longitud
                });
            }
            setMarkers(map, playasJson);
        }

        // Obtener la instancia del objeto XMLHttpRequest
        function inicializa_xhr() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
                return new ActiveXObject("Msxml3.XMLHTTP");
            }
            else if (window.ActiveXObject) {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }
            else if (window.ActiveXObject) {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            else if (window.ActiveXObject) {
                return new ActiveXObject("Msxml2.XMLHTTP");
            }
            else if (window.ActiveXObject) {
                return ActiveXObject("Microsoft.XMLHTTP");
            }
        }


        //Mostrar la info del json
        function  muestraContenido() {
            if (peticion_http.readyState === READY_STATE_COMPLETE) {
                if (peticion_http.status === 200) {
                    documento_json = peticion_http.responseText;
                    var objeto = JSON.parse(documento_json);
                    var playasObtenidas = objeto.playas;
                    rellenarJson(playasObtenidas);
                }

            }
        }

        //Llamar al json en una variable y añadir funcion
        function cargarContenido(url, metodo, funcion)
        {
            peticion_http = inicializa_xhr();
            if (peticion_http)
            {
                peticion_http.onreadystatechange = funcion;
                peticion_http.open(metodo, url, true);
                peticion_http.send(null);
            }
        }


        function descargaArchivo() {
            cargarContenido("json/listadoPlayas.json", "GET", muestraContenido);
        }


        function setMarkers(map, playasArray) {

            for (var k = 0; k < playasArray.length; k++) {
                var beach = playasArray[k];
                var myLatLng = new google.maps.LatLng(beach.lat, beach.long);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    //icon: image,
                    //shape: shape,
                    title: beach[0],
                    zIndex: beach[3]
                });
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

尽管我将 eval(...) 更改为 JSON.parse(documento_json)，但其余代码保持不变。您还必须从setMarkers 中删除对descargaArchivo 的调用