不同的JSON文件中的不同数据。如何加载它们
我有两个不同的 json 文件( marker.json 和 marker.json0 ),它们包含不同的坐标(纬度和经度),我需要通过将 .json0 重命名为 .json 来加载它们(显然以前的 .json 现在是 .json0 ),以便以前的 .json0 (现在的 .json )中包含的不同数据在处理 ajax 请求的 javascript 文件中解析,该请求导致标记和信息窗口显示在地图上。
-
这是处理 json 数组异步加载的 javascript 文件。此外,还有两个函数 search 和 remove。每当用户单击“cerca”或“cancella”按钮时,它们都会触发,但它们的用途不同。 searchAddress 解析 循环内的 json 数组,以便标记和 信息窗口可见,而 removeAddress 则将它们从地图中删除, 现在我需要再次单击“cerca”按钮来重新创建标记和 信息窗口,这一次它们属于新的 json 文件,在我的 网络服务器上,我将 js 文件中使用的扩展名重命名为 .json。最后一次编辑构建了一个函数来处理 ajax 请求,在代码的末尾我加载了两个 json 文件,但标记仍然位于相同的坐标上。 我删除了几乎所有的全局变量,并尝试使用参数来定义函数内的变量。尚未找到解决方案
edit to js file
var map; function initialize() { var mapOptions = { zoom: 16, center: new google.maps.LatLng(41.898055, 12.515112) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); function Get(url) { var xmlhttp = new XMLHttpRequest(); console.log(url); arr; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { arr = JSON.parse(xmlhttp.responseText); } } xmlhttp.open("GET", url, true); xmlhttp.send(); function Markers(arr) { var infowindow = []; var marker = []; function searchAddress(){ for(var i = 0; i < arr.length; i++) { console.log(arr); (function(i){ //new line infowindow[i] = new google.maps.InfoWindow({ title: arr[i].title, content: arr[i].content }); marker[i] = new google.maps.Marker({ title: arr[i].title, icon: arr[i].icon, size: arr[i].size, coords: arr[i].coords, type: arr[i].type, draggable: false, //map: map, animation: google.maps.Animation.DROP, //animation: google.maps.Animation.BOUNCE, position: new google.maps.LatLng(arr[i].latitude,arr[i].longitude) }); marker[i].setMap(map) google.maps.event.addListener(marker[i], 'click', function() { infowindow[i].open(map,this); }); })(i); //new line } } // Sets the map on all markers in the array. function setAllMap(map) { for (var i = 0; i < marker.length; i++) { marker[i].setMap(map); } } function removeAddress(){ setAllMap(null); prevArr = arr.slice(); } } markers = Get("http://89.97.214.162/accessibilita json/marker_json1.json"); markers.concat(Get("http://89.97.214.162/accessibilita/json/marker_json2.json"));
new javascript errors occured after editing the code:
- TypeError:markers 未定义
-
ReferenceError:searchAddress 未定义(此错误仅当我单击“cerca”按钮时发生,每次单击该按钮都会触发
onclick
事件
-
这是第一个 json 数组,其中包含在 js 数组中解析的纬度、经度、标题和内容,以便地图能够检索它们并显示所需信息 (.json)
[
{
"title": "Paolo",
"latitude": 41.897115,
"longitude": 12.513300,
"content": "Cooperativa fornitrice di servizi sociali,<br/> Viale Eleonora D'Arborea 12<br/> 00162 Roma<br/> <a href='http://www.prassiericerca.com' target='_blank'>Prassi e Ricerca</a>",
"icon": "img/orange-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "Galasso",
"latitude": 41.897379,
"longitude": 12.513272,
"content": "Penelope e altri servizi <a href='http://www.borghiartistici.com' target='_blank'>Borghi Artistici S.r.l.</a>",
"icon": "img/green-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
........
]
-
这是第二个 json 数组,包含新信息每当此文件从 .json1 重命名为 .json 并将另一个文件从 .json 重命名为 .json1 时,都会加载此文件 json 文件加载由 js 文件处理
[
{
"title": "Bar dei Pini",
"latitude": 41.897115,
"longitude": 12.513300,
"content": "Specialita Gelato Artigianale<br/> Viale Eleonora D'Arborea 12<br/> 00162 Roma<br/> <a href='http://www.prassiericerca.com' target='_blank'>Prassi e Ricerca</a>",
"icon": "img/pink-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
{
"title": "Alimentari San Lorenzo",
"latitude": 41.897379,
"longitude": 12.513272,
"content": "Specialita Calabresi<a href='http://www.borghiartistici.com' target='_blank'>Borghi Artistici S.r.l.</a>",
"icon": "img/green-dot.png",
"coords": "1, 1, 1, 20, 18, 20, 18 , 1",
"type": "poly"
},
........
]
As a matter of fact the pages does not need to be reloaded because the two json files are renamed as long as at least one of two is .json
如果不重命名任何内容,事情会简单得多。由于
XMLHttpRequest
是客户端操作,因此它无权重命名服务器上的文件,例如
json1.json
。是什么阻止您将所有获取 JSON 的代码放入带有 URL 作为参数的函数中?
function Get(url){
var xmlhttp = new XMLHttpRequest();
console.log(url);
var arr;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
arr = JSON.parse(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
return arr;
}
这样,您就可以获得所需的所有文件。因此您可以执行以下操作:
markers = Get("http://www.example.com/json1.json");
markers.concat(Get("http://www.example.com/json2.json"));
或类似操作。
然后可以对您的标记代码执行类似操作。将其放入函数后,您可以将
markers
变量作为参数提交给该函数,它将在该地图上显示它们。
本质上,尝试将您的代码分解为函数 a) 以便它更容易流动,并且 b) 重复使用相同的代码。
如果我正确理解了您的问题,下面是解决方法,希望可以解决您的问题。似乎两个文件中的 json 属性 title
latitude
longitude
content
icon
coords
type
相同,但纬度和经度值会有所不同。在这种情况下,为什么我们不能使用具有这些属性的 pojo 并使用 Gson api 将 json 编组到此 pojo。所以现在 json1 将在 pojo object1 中,而 json2 将在 pojo object2 中。将这两个对象添加到列表中,然后将列表添加到 JsonParser。这将通过合并两个 json 文件数据再次生成 json。现在 JsonParser 生成的数据发送到 java 脚本文件。
希望它清楚。