Question

我正在尝试使用google热图图层创建热图。我的输入数据在XML文件中。

我需要创建一个包含这样的入口的数组：

var heatmapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}
]

（https://developers.google.com/maps/documentation/javascript/heatmaplayer）

我有一个函数可以从我的XML文件中读取经度和纬度数据并将其推送到一个数组，然后由谷歌热图图层函数使用。

这给了我一个这样的数组：

var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -123.447),
new google.maps.LatLng(37.782, -122.447)
]

但是我不知道如何将我的体重数据（我的XML文件中的weed_index）附加到数组中，我的搜索时间让我陷入困境。

我该怎么做？

我的项目在这里

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        background-color: #fff;
        border: 1px solid #999;
        left: 25%;
        padding: 5px;
        position: absolute;
        top: 10px;
        z-index: 5;
      }
    </style>
  </head>

  <body>
    <div id="floating-panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>

      // This example requires the Visualization library. Include the libraries=visualization
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 30,
          center: {lat: 5622.5693*0.01, lng: 934.2757*0.01},
          mapTypeId: 'satellite'
        });



var heatmapData = []; //array to hold objects parsed form XML file
var markerCoords;

loadXMLFile();            
            function loadXMLFile(){
            //var filename = 'data.xml';
            var filename = 'markers.xml';
            $.ajax({
                type: "GET",
                url: filename ,
                dataType: "xml",
                success: parseXML,
                error : onXMLLoadFailed
            });

            function onXMLLoadFailed(){
            alert("An Error has occurred.");
            }

            function parseXML(xml){
            var bounds = new google.maps.LatLngBounds();
                  $(xml).find("location").each(function(){
                      //Read the latitude, longitude and weed indexfor each location
                      var lat = $(this).find('lat').text()*0.01;  //coordinates in XML are in wrong format. Multiply by 0.01 to fix
                      var lng = $(this).find('lng').text()*0.01;  //coordinates in XML are in wrong format. Multiply by 0.01 to fix
                      var weed_index = $(this).find('weed_index').text();

                      //markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

                      markerCoords = {
                          location: new google.maps.LatLng(+lat, +lng),
                          weight: +weed_index
                      };

                      //itterate objects into heatmapData array
                      heatmapData.push(markerCoords);
                      bounds.extend(markerCoords);

                      //console.log(heatmapData);
                  });
                   //map.objects.add(container);
                   //map.zoomTo(container.getBoundingBox(), false);
                  map.fitBounds(bounds);
            }        
}

        /*var heatmapData = [
        {location: new google.maps.LatLng(56.225693, 9.342757), weight: 0.5},
        {location: new google.maps.LatLng(56.225694, 9.342154), weight: 3}
        ];*/

        heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        map: map
        });
        }

function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 20);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.5);
      }


    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMJI8WJuBPtFqp3VVB7bkLsEWhEtU3Uco&libraries=visualization&callback=initMap">
    </script>
}

  </body>
</html>

Xml文件如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<locations>
   <location id="1">
      <lat>5622.5693</lat>
      <lng>934.2757</lng>
      <weed_index>21</weed_index>
   </location>
   <location id="2">
      <lat>5622.5693</lat>
      <lng>934.2757</lng>
      <weed_index>10</weed_index>
   </location>
</locations>

Answer 1

你有这个：

var weed_index = $(this).find('weed_index').text();
markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

这样做：

var weed_index = $(this).find('weed_index').text();
markerCoords = {
    location: new google.maps.LatLng(+lat, +lng),
    weight: +weed_index
};

注意：单一+提供了一种更有效的方式将文本转换为数字。

如何：XML文件中的对象数组

1 个答案: