Question

请帮助从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>

Answer 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中拉出任何对象。如果你不知道怎么做，我会编辑我的答案来添加它，但是如果你谷歌的话它是非常容易搜索的，可以找到;）如果这有效，请告诉我，伙计。

Answer 2

您的代码已经在解析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);

proof of concept fiddle

代码段

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>

如何从json中提取地图坐标并分配给变量

2 个答案: