Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Слой карт интенсивности

  1. Обзор
  2. Загрузка библиотеки Visualization
  3. Добавление взвешенных точек данных
  4. Настройка слоя карт интенсивности

Слой карт интенсивности обеспечивает прорисовку карт интенсивности на стороне клиента.

Обзор

Карта интенсивности используется для передачи интенсивности данных в географических точках. Когда слой карт интенсивности включен, поверх карты отображается цветное наложение. По умолчанию области с более высокой интенсивностью окрашены красным цветом, а с более низкой – зеленым.

Google Maps JavaScript API может выполнять прорисовку данных карт интенсивности на стороне клиента с помощью слоя карт интенсивности или на стороне сервера с помощью Fusion Table. Ниже приведены основные отличия между этими двумя методами.

Слой карт интенсивности Слой Fusion Table
При большом количестве точек данных возможно снижение производительности. Увеличение количества точек данных мало влияет на производительность.
Внешний вид карты интенсивности можно настроить, изменяя такие параметры, как градиент цвета, радиус точек данных и интенсивность каждой точки данных. Возможность настройки внешнего вида карты интенсивности отсутствует.
Можно определить, должны ли данные карты интенсивности дополнительно распределяться при увеличении масштаба или нет. Все данные карты интенсивности дополнительно распределяются при увеличении масштаба.
Данные могут храниться в коде HTML, на сервере или вычисляться в процессе работы. Данные можно изменять во время работы приложения. Все данные должны храниться в таблице Fusion Table. Данные не могут быть легко изменены во время работы приложения.

Загрузка библиотеки Visualization

Слой карт интенсивности входит в библиотеку google.maps.visualization и не загружается по умолчанию. Классы Visualization – это автономная библиотека, отдельная от основного кода Google Maps JavaScript API. Чтобы использовать функции из этой библиотеки, необходимо предварительно загрузить ее с помощью параметра libraries в загрузочном URL-адресе Maps JavaScript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Добавление слоя карт интенсивности

Чтобы добавить слой карт интенсивности, нужно предварительно создать новый объект HeatmapLayer и передать ему определенные географические данные в виде массива или объекта MVCArray[]. Эти данные могут быть либо объектами LatLng, либо объектами WeightedLocation. После создания экземпляра объекта HeatmapLayer его нужно добавить на карту с помощью метода setMap().

В следующем примере на карту Сан-Франциско добавляется 14 точек данных.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

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

Добавление взвешенных точек данных

Карта интенсивности может обеспечить прорисовку объекта LatLng, объекта WeightedLocation или их комбинации. Оба объекта представляют отдельную точку данных на карте, однако объект WeightedLocation также позволяет указать вес этой точки данных. При добавлении веса к точке данных объект WeightedLocation отображается более интенсивным, чем простой объект LatLng. Вес указывается по линейной шкале, где каждый объект LatLng имеет условный вес 1. Добавление одного объекта WeightedLocation с параметрами {location: new google.maps.LatLng(37.782, -122.441), weight: 3} будет иметь такое же действие, как трехкратное добавление объекта google.maps.LatLng(37.782, -122.441). Объекты weightedLocation и LatLng можно объединять в одном массиве.

Использование объекта WeightedLocation вместо объекта LatLng применяется в следующих случаях.

  • Добавление больших объемов данных для одного места. Прорисовка одного объекта WeightedLocation с весом 1 000 выполняется быстрее, чем визуализация 1 000 объектов LatLng.
  • Выделение данных на основе произвольных значений. Например, вы можете использовать объекты LatLng для отображения данных о землетрясениях, но при этом использовать объекты WeightedLocation для отображения силы каждого землетрясения по шкале Рихтера.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

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

Настройка слоя карт интенсивности

Вы можете настроить прорисовку карты интенсивности с помощью нижеприведенных параметров. Дополнительную информацию см. в документации по параметрам HeatmapLayerOptions.

  • dissipating: указывает, будут ли данные на картах интенсивности "рассеиваться" при увеличении масштаба. Если это свойство имеет значение false, радиус влияния увеличивается при увеличении масштаба, сохраняя цветовую интенсивность для любого географического местоположения. По умолчанию используется значение false.
  • gradient: цветовой градиент карты интенсивности, заданный в виде массива строк CSS, определяющих цвет. Поддерживаются все цвета CSS3, включая RGBA, за исключением цветов с расширенными именами и значений HSL(A).
  • maxIntensity: максимальная интенсивность цветов на карте интенсивности. По умолчанию цвета карты интенсивности динамически изменяются в зависимости от максимальной концентрации точек в каждом определенном пикселе карты. Это свойство позволяет устанавливать фиксированное ограничение максимальной интенсивности. Установка такого ограничения применяется, если в наборе данных содержится несколько мест с необычно высокой интенсивностью.
  • radius: радиус влияния каждой точки данных (в пикселях).
  • opacity: непрозрачность карты интенсивности, выраженная в виде значения от 0 до 1.

В примере ниже показаны некоторые доступные параметры настройки.

Просмотр примера слоя карт интенсивности

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.