Как получить Google Тепловую карту LatLng с JSON? - PullRequest
Новая
       33

Как получить Google Тепловую карту LatLng с JSON?

0 голосов
/ 30 июня 2018

Я хочу получить тепловую карту Google LatLng с Json file

Это моя функция тепловой карты Google 

 function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: {lat: 37.782551, lng: -122.445368}
        });

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

    }


Это моя функция LatLng, я хочу вместо этого использовать функцию getPoints () JSON файл 

function getPoints() {
        return [
        new google.maps.LatLng(37.782551, -122.445368),
        new google.maps.LatLng(37.782745, -122.444586),
        new google.maps.LatLng(37.782842, -122.443688),
        new google.maps.LatLng(37.782919, -122.442815),
        new google.maps.LatLng(37.782992, -122.442112),
}

1 Ответ

0 голосов
/ 30 июня 2018

Допустим, вы создаете файл с именем points.json, который выглядит следующим образом и доступен в том же каталоге, что и HTML-код вашей веб-страницы. 

{
  "points": [
    [37.782551, -122.445368],
    [37.782745, -122.444586],
    [37.782842, -122.443688],
    [37.782919, -122.442815],
    [37.782992, -122.442112]
  ]
}

Затем вам нужно запросить файл JSON с веб-сервера. Если вы можете использовать последние веб-браузеры, вы можете использовать fetch для этого: 

function requestPoints() {
  fetch('points.json')
    .then(function(response) {
      return response.json();
    })
    .then(initMap);
}

Если вы не можете использовать последние веб-браузеры, то вы можете сделать нечто подобное с jQuery.getJSON .

Когда возвращается сетевой запрос для points.json, он вызывает initMap с JSON. Тогда вы можете использовать JSON следующим образом: 

function initMap(json) {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 37.782551, lng: -122.445368}
  });

  var points = json.points;
  var data = [];
  var i;
  for (i = 0; i < points.length; i++) {
    data[i] = new google.maps.LatLng(points[i][0], points[i][1]);
  }

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

}

Если вы следуете примерам Google, вам нужно изменить параметр обратного вызова в запросе скрипта с callback=initMap на callback=requestPoints.

...