我目前正在为大学项目构建一个小型移动网络应用。我尝试构建的应用程序从各种树种的JSON文件中获取值，然后通过在HTML页面上使用Jquery列出这些值 - 当单击其中一个列表项时，它将用户带到谷歌地图想要从JSON文件中的坐标信息中绘制多边形的页面。
我的JSON文件如下所示：
[{
"forestnumber":"1",
"name":"Cork Oak" ,
"imagelocation":"img/corkoak.png" ,
"scientificname":"Cork Oak" ,
"type":"Evergreen" ,
"shortdesc":"Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa." ,
"coordinates": [[-35.279033, 149.079420], [-35.279240, 149.081258], [-35.283641, 149.081343], [-35.283405, 149.079024]]
},{
"forestnumber":"2",
"name":"Local Eucalypts And Grasses" ,
"imagelocation":"img/localeucalypts.png" ,
"scientificname":"Various" ,
"type":"Evergreen" ,
"shortdesc":"There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines." ,
"coordinates": [[-35.279136, 149.081158], [-35.279305, 149.081193], [-35.283613, 149.081276], [-35.283405, 149.07902], [-35.284155, 149.080923], [-35.284425, 149.081320], [-35.286067, 149.081197], [-35.286094, 149.080900], [-35.286328, 149.081362], [-35.285604, 149.082060], [-35.284642, 149.082469], [-35.283257, 149.082599], [-35.281447, 149.082384], [-35.280926, 149.082163], [-35.280354, 149.081800], [-35.279764, 149.081678]]
},{
"forestnumber":"3",
"name":"Common Fig" ,
"imagelocation":"img/figs.png" ,
"scientificname":"Ficus Carica" ,
"type":"Deciduous" ,
"shortdesc":" Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne." ,
"coordinates": [[-35.285872, 149.079429], [-35.285624, 149.077371], [-35.286509, 149.078898]]
}]
每个森林都有编号，每个坐标值都是另一个数组。
我的jQuery代码如下所示：
$.getJSON( "js/forests.json", function( data ) {
for (var i = 0; i <= data.length; i++) { //loop through JSON file
var value = data[i];//set value to represent data
var _html; // set _html as a variable
_html = "<li class='forestlistitem' data-val='"+value.forestnumber+"'><span class='name'>"+value.name+"</span><img src='"+value.imagelocation+"' alt='"+value.name+"' class='listimage' /></li>" ;
$('#forestlistbody ul').append(_html); //append _html to the HTML of the page
$('.forestlistitem').click(function(){ //sort of a no-no but the only way i can get it to work?
$("#forests").hide();//hides forests div in HTML
$("homeselect").hide();//hides homeselect div in HTML
$("trails").hide();//hides trails div in HTML
$("#map").show();//shows map div in HTML
initMap();//initializes map function
numb = $(this).data('val'); // sets global variable numb to the forest number associated with which option was clicked
console.log(numb); // output numb variable to console in order to test that it is sending the correct number
});
问题：所以基本上我希望能够从这里做的是通过将每个坐标值推入MVCArray，将与点击的列表项关联的坐标数组输出到MVCArray中。此代码看起来像这样（目前不是每个循环，因为我不知道如何从JSON输出它）。
var forest = new google.maps.MVCArray();
forest.push ( new google.maps.LatLng(-35.285872, 149.079429) );
forest.push ( new google.maps.LatLng(-35.285624, 149.077371) );
forest.push ( new google.maps.LatLng(-35.286509, 149.078898) );
var polygonOptions = {path: forest};
var polygon = new google.maps.Polygon(polygonOptions);
polygon.setMap(map);
如果有人能帮助我，我非常欣赏它，我一直在绞尽脑汁看着各种资源，但我无法弄清楚如何从JSON中获取数组值并进入每个推送项目的循环。这是第二次使用代码，所以我仍然有点新手= p
答案 0 :(得分：0)
要将JSON解析为google.maps.Polygon个对象，请将当前包含坐标的数组数组转换为google.maps.LatLng个对象（或google.maps.LatLngLiteral个对象）数组
for (var i = 0; i < jsonData.length; i++) {
var coordinates = [];
for (var j = 0; j < jsonData[i].coordinates.length; j++) {
var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]);
coordinates.push(pt);
}
var polygon = new google.maps.Polygon({
map: map,
paths: [coordinates]
})
}
代码段
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < jsonData.length; i++) {
var coordinates = [];
for (var j = 0; j < jsonData[i].coordinates.length; j++) {
var pt = new google.maps.LatLng(jsonData[i].coordinates[j][0], jsonData[i].coordinates[j][1]);
coordinates.push(pt);
bounds.extend(pt);
}
var polygon = new google.maps.Polygon({
map: map,
paths: [coordinates]
})
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var jsonData = [{
"forestnumber": "1",
"name": "Cork Oak",
"imagelocation": "img/corkoak.png",
"scientificname": "Cork Oak",
"type": "Evergreen",
"shortdesc": "Quercus suber, commonly called the cork oak, is a medium-sized, evergreen oak tree in the section Quercus sect. Cerris. It is the primary source of cork for wine bottle stoppers and other uses, such as cork flooring. It is native to southwest Europe and northwest Africa.",
"coordinates": [
[-35.279033, 149.079420],
[-35.279240, 149.081258],
[-35.283641, 149.081343],
[-35.283405, 149.079024]
]
}, {
"forestnumber": "2",
"name": "Local Eucalypts And Grasses",
"imagelocation": "img/localeucalypts.png",
"scientificname": "Various",
"type": "Evergreen",
"shortdesc": "There are more than 700 species of eucalyptus and are mostly native of Australia, and a very small number are found in adjacent areas of New Guinea and Indonesia. One species, Eucalyptus deglupta, ranges as far north as the Philippines.",
"coordinates": [
[-35.279136, 149.081158],
[-35.279305, 149.081193],
[-35.283613, 149.081276],
[-35.283405, 149.07902],
[-35.284155, 149.080923],
[-35.284425, 149.081320],
[-35.286067, 149.081197],
[-35.286094, 149.080900],
[-35.286328, 149.081362],
[-35.285604, 149.082060],
[-35.284642, 149.082469],
[-35.283257, 149.082599],
[-35.281447, 149.082384],
[-35.280926, 149.082163],
[-35.280354, 149.081800],
[-35.279764, 149.081678]
]
}, {
"forestnumber": "3",
"name": "Common Fig",
"imagelocation": "img/figs.png",
"scientificname": "Ficus Carica",
"type": "Deciduous",
"shortdesc": " Although commonly referred to as a fruit, the fig is actually the infructescence or scion of the tree, known as a false fruit or multiple fruit, in which the flowers and seeds are borne.",
"coordinates": [
[-35.285872, 149.079429],
[-35.285624, 149.077371],
[-35.286509, 149.078898]
]
}];html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>