外部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"
}
]
}
和javascript，我读取JSON并为每个对象添加纬度和纵向的标记
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>
<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&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>
有人知道为什么不工作？我不知道为什么？非常感谢！
答案 0 :(得分：0)
如果那是服务器发回的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)，但其余代码仍保持不变。您还必须从descargaArchivo
setMarkers的来电