Ajax 谷歌地图从JSON文件_Ajax_Json_Jquery_Google Maps Api 3_Heatmap

Ajax 谷歌地图从JSON文件

ajax json jquery google-maps-api-3

Ajax 谷歌地图从JSON文件,ajax,json,jquery,google-maps-api-3,heatmap,Ajax,Json,Jquery,Google Maps Api 3,Heatmap,我正在尝试使用GoogleMapsAPI和heatmaps.js创建一个包含两层的热图。我可以通过硬编码lat/lon变量来创建映射，但最终我希望从JSON文件中获取可以轻松刷新的层这是我当前的HTML，它非常有效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi

我正在尝试使用GoogleMapsAPI和heatmaps.js创建一个包含两层的热图。我可以通过硬编码lat/lon变量来创建映射，但最终我希望从JSON文件中获取可以轻松刷新的层

这是我当前的HTML，它非常有效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href='css/bootstrap.css' rel='stylesheet' type='text/css'></link>
    <link href='css/bootstrap-responsive.css' rel='stylesheet' type='text/css'></link>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&.js"></script>

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>

    <script>
      var map, pointarray, heatmap;

      var layer1 = [
        {location: new google.maps.LatLng(42.071523,-72.624257), weight:13.747727085},
        {location: new google.maps.LatLng(42.37686,-72.46914), weight:6.6332495807},
        {location: new google.maps.LatLng(42.40524,-72.528427), weight:5.1961524227},
        {location: new google.maps.LatLng(42.383945,-72.511834), weight:1.7320508076},
        {location: new google.maps.LatLng(42.433317,-72.114488), weight:5.6568542495}
      ];

      var layer2 = [
        {location: new google.maps.LatLng(41.513113,-74.37616), weight:2.4494897428},
        {location: new google.maps.LatLng(41.147711,-73.941171), weight:10},
        {location: new google.maps.LatLng(41.329376,-74.347207), weight:4.8989794856},
        {location: new google.maps.LatLng(41.338977,-73.987248), weight:1.7320508076}
      ];


      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(38.82, -99.408660),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        pointArray1 = new google.maps.MVCArray(layer1);
        pointArray2 = new google.maps.MVCArray(layer2);

        heatmap1 = new google.maps.visualization.HeatmapLayer({
          data: pointArray1
        });
        heatmap2 = new google.maps.visualization.HeatmapLayer({
          data: pointArray2
        });

        heatmap1.setMap(map);
        heatmap2.setMap(map);
      }

    //FUNCTION TO CHANGE LAYERS
    function changeMap(layerNum) {

    if (layerNum == 1) {
    updateMap(heatmap1);
    }
    if (layerNum == 2) {
    updateMap(heatmap2);
    }
    }

    //FUNCTION TO UPDATE LAYERS
    function updateMap(layer) {
       var layerMap = layer.getMap();
       if (layerMap) {
          layer.setMap(null);
       } else {
          layer.setMap(map);
       }
    } 
    </script>

    <link href='css/DT_bootstrap.css' rel='stylesheet' type='text/css'></link>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

 </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Test Page</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">...</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

<body class="container-fluid">
    <div class="row">
        <div class="span12" style="float: none; margin: 0 auto;">
          <body onload="initialize()">
          <h3>Test Layers</h3>
            <input type='checkbox' name='system_type17' value='1' onclick="changeMap(this.value);" checked="checked" />
            <span style="width:100px;display:inline-block;">Layer 1</span>
            <input type="checkbox" name="system_type3" value="2" onclick="changeMap(this.value);" checked="checked" />
            <span style="width:100px;display:inline-block;">Layer 2</span>
            <br><br/>
            <div id="map-canvas" style="height: 575px; width: 1000px;"></div>
          </body>
        </div>
    </div>
</body>

  </body>
</html>

根据Yehia的建议更新代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href='css/bootstrap.css' rel='stylesheet' type='text/css'></link>
    <link href='css/bootstrap-responsive.css' rel='stylesheet' type='text/css'></link>

    <script type='text/javascript' src='js/jquery-1.8.3.js'></script>
    <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&.js"></script>

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>

    <script>
      var map, pointarray, heatmap;

      /*var layer1 = [
        {location: new google.maps.LatLng(42.071523,-72.624257), weight:13.747727085},
        {location: new google.maps.LatLng(42.37686,-72.46914), weight:6.6332495807},
        {location: new google.maps.LatLng(42.40524,-72.528427), weight:5.1961524227},
        {location: new google.maps.LatLng(42.383945,-72.511834), weight:1.7320508076},
        {location: new google.maps.LatLng(42.433317,-72.114488), weight:5.6568542495}
      ];

      var layer2 = [
        {location: new google.maps.LatLng(41.513113,-74.37616), weight:2.4494897428},
        {location: new google.maps.LatLng(41.147711,-73.941171), weight:10},
        {location: new google.maps.LatLng(41.329376,-74.347207), weight:4.8989794856},
        {location: new google.maps.LatLng(41.338977,-73.987248), weight:1.7320508076}
      ];*/

      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(38.82, -99.408660),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }

    //FUNCTION TO CHANGE LAYERS
    function changeMap(layerNum) {

    if (layerNum == 1) {
    updateMap(heatmap1);
    }
    if (layerNum == 2) {
    updateMap(heatmap2);
    }
    }

    //FUNCTION TO UPDATE LAYERS
    function updateMap(layer) {
       var layerMap = layer.getMap();
       if (layerMap) {
          layer.setMap(null);
       } else {
          layer.setMap(map);
       }
    } 
    </script>

    <link href='css/DT_bootstrap.css' rel='stylesheet' type='text/css'></link>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

 </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Test Page</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">...</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

<body class="container-fluid">
    <div class="row">
        <div class="span12" style="float: none; margin: 0 auto;">
          <body onload="initialize()">
          <h3>Test Layers</h3>
            <input type='checkbox' name='system_type17' value='1' onclick="changeMap(this.value);" checked="checked" />
            <span style="width:100px;display:inline-block;">Layer 1</span>
            <input type="checkbox" name="system_type3" value="2" onclick="changeMap(this.value);" checked="checked" />
            <span style="width:100px;display:inline-block;">Layer 2</span>
            <br><br/>
            <div id="map-canvas" style="height: 575px; width: 1000px;"></div>
          </body>
        </div>
    </div>
      <script type="text/javascript">
        $.getJSON("testdata.json").then(function(data) {
              $.each(data, function(i,datapoints) {
                $.each(datapoints, function(j,datapoint) {
                  layers.push({
                    location: new google.maps.LatLng(datapoint.lat, datapoint.lng),
                    weight: datapoint.weight,
                    layerID: datapoint.layer
                  });
                });
              });
            });
    <script>
</body>

  </body>
</html>


身体{
填充顶部：60px；
填充底部：40px；
}
.侧边栏导航{
填充：9px0；
}
@介质（最大宽度：980px）{
/*启用浮动导航栏文本的使用*/
.navbar-text.pull-right{
浮动：无；
左侧填充：5px；
右侧填充：5px；
}
}
var图、点阵列、热图；
/*变量层1=[
{地点：new google.maps.LatLng（42.071523，-72.624257），重量：13.747727085}，
{地点：new google.maps.LatLng（42.37686，-72.46914），重量：6.6332495807}，
{地点：new google.maps.LatLng（42.40524，-72.528427），重量：5.1961524227}，
{位置：new google.maps.LatLng（42.383945，-72.511834），重量：1.7320508076}，
{位置：new google.maps.LatLng（42.433317，-72.114488），重量：5.6568542495}
];
变量层2=[
{位置：new google.maps.LatLng（41.513113，-74.37616），重量：2.4494897428}，
{地点：新google.maps.LatLng（41.147711，-73.941171），重量：10}，
{位置：new google.maps.LatLng（41.329376，-74.347207），重量：4.89794856}，
{位置：new google.maps.LatLng（41.338977，-73.987248），重量：1.7320508076}
];*/
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（38.82，-99.408660），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
//用于更改图层的函数
功能变更图（layerNum）{
如果（layerNum==1）{
更新地图（热图1）；
}
如果（layerNum==2）{
更新地图（热图2）；
}
}
//用于更新图层的函数
函数更新映射（层）{
var layerMap=layer.getMap（）；
如果（图层映射）{
layer.setMap（空）；
}否则{
图层设置图（map）；
}
} 

登录为






测试层
第一层
第二层



$.getJSON（“testdata.json”）。然后（函数（数据）{
$。每个（数据、函数（i、数据点）{
$。每个（数据点，函数（j，数据点）{
推({
位置：新的google.maps.LatLng（datapoint.lat，datapoint.lng），
重量：datapoint.weight，
layerID:datapoint.layer
});
});
});
});

好吧，我想差不多了。非常感谢你迄今为止的帮助，我知道这很痛苦。这是我的初始化函数，我仍然得到未捕获的引用错误：没有定义层

<script type='text/javascript'>
      var map, pointarray, heatmap;

      function initialize() {

            function loadData() {
            var layers = [ ];
            $.ajax({
              url: 'testdata.json',
              async: false,
              dataType: 'json',
              success: function (data) {
                for (var i=0; i<data.datapoints.length; i++) {
                  var datapoint = data.datapoints[i];
                  if (layers[datapoint.layer]===undefined) {
                    layers[datapoint.layer] = [];
                  }
                  layers[datapoint.layer].push({
                    location: new google.maps.LatLng(datapoint.lat, datapoint.lon),
                    weight: datapoint.weight,
                    layerID: datapoint.layer
                  });
                }
              }
            });
            return layers;
          }
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(38.82, -99.408660),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        pointArray1 = new google.maps.MVCArray(layers[1]);
        pointArray2 = new google.maps.MVCArray(layers[2]);

        heatmap1 = new google.maps.visualization.HeatmapLayer({
          data: pointArray1
        });
        heatmap2 = new google.maps.visualization.HeatmapLayer({
          data: pointArray2
        });

        heatmap1.setMap(map);
        heatmap2.setMap(map);
      }

    //FUNCTION TO CHANGE LAYERS
    function changeMap(layerNum) {

    if (layerNum == 1) {
    updateMap(heatmap1);
    }
    if (layerNum == 2) {
    updateMap(heatmap2);
    }
    }

    //FUNCTION TO UPDATE LAYERS
    function updateMap(layer) {
       var layerMap = layer.getMap();
       if (layerMap) {
          layer.setMap(null);
       } else {
          layer.setMap(map);
       }
    } 
    </script>


var图、点阵列、热图；
函数初始化（）{
函数loadData（）{
var层=[]；
$.ajax({
url:'testdata.json'，
async:false，
数据类型：“json”，
成功：功能（数据）{
对于（var i=0；i，您需要一种读取JSON并将其解析为所需变量的方法
$.getJSON("layers.json").then(function(data) {
      $.each(data, function(i,datapoints) {
        $.each(datapoints, function(j,datapoint) {
          layers.push({
            location: new google.maps.LatLng(datapoint.lat, datapoint.lng),
            weight: datapoint.weight,
            layerID: datapoint.layer
          });
        });
      });
    });

根据需要进行调整
为了响应davids12的更新，这里有一个函数返回一个数组数组，其中每个复合数组都有来自某个层的数据点。因此，在您的示例中，layers
将有两个数组（layers[1]
和layers[2]
）基本上是您在代码中描述的layer1
和layer2
（带有一个额外的layerID
变量；如果您愿意，可以将其删除）。这允许您只需使用现在的格式将其放入JSON中，即可加载更多的层和点
  function loadData() {
    var layers = [ ];
    $.ajax({
      url: 'j.json',
      async: false,
      dataType: 'json',
      success: function (data) {
        for (var i=0; i<data.datapoints.length; i++) {
          var datapoint = data.datapoints[i];
          if (layers[datapoint.layer]===undefined) {
            layers[datapoint.layer] = [];
          }
          layers[datapoint.layer].push({
            location: new google.maps.LatLng(datapoint.lat, datapoint.lng),
            weight: datapoint.weight,
            layerID: datapoint.layer
          });
        }
      }
    });
    return layers;
  }

函数loadData（）{
var层=[]；
$.ajax({
url:'j.json'，
async:false，
数据类型：“json”，
成功：功能（数据）{
对于（var i=0；我是新手警报。我已经在这方面做了一段时间了，似乎无法将JSON数据点渲染到地图上。就我的代码而言，我可能有点不对劲，你能告诉我哪里出错了吗？请看我上面帖子中的更新代码块。谢谢你的帮助。我添加了你的函数，返回e层中有2个数组。我如何将这些数组实际加载到我的地图中？以前我有一个名为layer1的变量，其中包含数据点，我最终将其加载到我的地图中，如下所示：pointArray1=new google.maps.MVCArray（layer1）；只需将layer1
替换为layers[1]
等等。当然，首先调用函数将数据加载到层中。我有两个单独的函数：loadData（）和initialize（），我在body onload上调用这两个函数：当我打开控制台时，我得到以下错误：uncaughtreferenceerror:layers未定义从内部调用loadData initialize或只是将其代码复制到那里。
  function loadData() {
    var layers = [ ];
    $.ajax({
      url: 'j.json',
      async: false,
      dataType: 'json',
      success: function (data) {
        for (var i=0; i<data.datapoints.length; i++) {
          var datapoint = data.datapoints[i];
          if (layers[datapoint.layer]===undefined) {
            layers[datapoint.layer] = [];
          }
          layers[datapoint.layer].push({
            location: new google.maps.LatLng(datapoint.lat, datapoint.lng),
            weight: datapoint.weight,
            layerID: datapoint.layer
          });
        }
      }
    });
    return layers;
  }