请帮助从Json对象中提取地图坐标并将它们分配到变量中，格式如下所示。目前我有一个google地图，其中的线条使用下面变量的坐标加入市场，我需要帮助填充变量＆＃34 ; flightPlanCoordinates＆＃34;动态来自Json API？
var flightPlanCoordinates = [
{lat: 19.1759668, lng: 72.79504659999998},
{lat: 19.0883595, lng: 72.82652380000002},
{lat: 18.9542149, lng: 72.81203529999993},
{lat: 18.979006, lng: 72.83388300000001},
{lat:19.2147067, lng: 72.91062020000004}
];
这是Json对象：
[
{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
{
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favorite tourist attractions situated in Mumbai.'
},
{
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
},
{
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
},
{
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}
];
这是整个代码，但函数getJsonstring（）不会根据需要重新调整数组，请指教？
<script type="text/javascript">
//Array of JSON objects.
var markers = [
{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
{
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favorite tourist attractions situated in Mumbai.'
},
{
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
},
{
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
},
{
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
var flightPlanCoordinates = getJsonString();
alert(flightPlanCoordinates);
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
function getJsonString(){
for (var j = 0; j < markers.length; j++) {
var data = markers[j]
var jsonString = new google.maps.LatLng(data.lat, data.lng);
return jsonString;
}
}
}
</script>
</head>
<body >
<div id="dvMap" style="width: 900px; height: 800px">
</div>
<div id="footer">
<div class="centre-container">
<div id="inner">
</div>
<div class="clear"></div>
</div>
</div>
</body>
答案 0 :(得分：1)
我将以硬编码方式运行此操作（我假设您已经有一个JSON对象从他们的文档连接到谷歌。）
第1步：
使用JSON.parse函数将json字符串插入var。
jsonString = JSON.parse('[
{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
{
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favorite tourist attractions situated in Mumbai.'
},
{
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
},
{
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
},
{
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}])';
第2步：
创建一个将拉出json对象的函数。
function getJsonString(){
return jsonString;
}
第3步：
用点符号从json中拉出任何对象。如果你不知道怎么做，我会编辑我的答案来添加它，但是如果你谷歌的话它是非常容易搜索的，可以找到;）如果这有效，请告诉我，伙计。
答案 1 :(得分：0)
您的代码已经在解析JSON以创建标记。将这些坐标推入数组以用作折线的路径。
var flightPathCoords = [];
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
flightPathCoords.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP
});
// snip
var flightPath = new google.maps.Polyline({
path: flightPathCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
代码段
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var flightPathCoords = [];
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
flightPathCoords.push(myLatlng);
// alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
var flightPath = new google.maps.Polyline({
path: flightPathCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
//Array of JSON objects.
var markers = [{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
}, {
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favorite tourist attractions situated in Mumbai.'
}, {
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
}, {
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
}, {
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}];
window.onload = function() {
LoadMap();
}html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap">
</div>
<div id="footer">
<div class="centre-container">
<div id="inner">
</div>
<div class="clear"></div>
</div>
</div>