Как добавить всплывающие окна, в которых свойство .geojson отображается над маркером в Картах Google? - PullRequest
Новая
       12

Как добавить всплывающие окна, в которых свойство .geojson отображается над маркером в Картах Google?

0 голосов
/ 21 апреля 2019

Я работаю над проектом, в котором я строю несколько сотен домов в API Карт Google, используя файл .geojson, который содержит все из них в виде функций с многочисленными свойствами.Я получил свой файл .js для загрузки файла .geojson и отображения каждого дома в качестве маркера на карте, однако я не могу понять, как взаимодействовать с этими точками.Я пытаюсь заставить точки отображать текстовое поле с их адресом (который указан как одно из свойств) в нем при наведении курсора на точку.

Это все, что мне удалось написать для моего.Файл js пока что - 

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 41.8963964, lng: -87.6864236},
          zoom: 13
  });

  map.data.loadGeoJson('data_table.json', 'Full Address');
}

https://i.stack.imgur.com/oBsJf.png

image of infowindow Это изображение типа текстового поля, которое я пытаюсь создать при наведении курсоранад точкой.

1 Ответ

0 голосов
/ 21 апреля 2019

Чтобы открыть InfoWindow при наведении мыши:

  1. создать InfoWindow: 
var infowindow = new google.maps.InfoWindow({
  pixelOffset: new google.maps.Size(0, -40) // offset for icon
});
добавить прослушиватель события mouseover к Data Layer, который открывает InfoWindow и отображает в нем соответствующее свойство (ниже «prop0»): 
map.data.addListener('mouseover', function(evt) {
  infowindow.setContent(evt.feature.getProperty('prop0'));
  infowindow.setPosition(evt.feature.getGeometry().get());
  infowindow.open(map);
});

proofконцептуальной скрипки

screenshot of resulting map with InfoWindow open

фрагмент кода: 

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });
  var infowindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(0, -40)
  });
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(evt) {
    if (evt.feature.getGeometry().getType() == 'Point') {
      bounds.extend(evt.feature.getGeometry().get());
      map.fitBounds(bounds);
    }
  })
  map.data.addGeoJson(geoJson);
  map.data.addListener('mouseover', function(evt) {
    console.log(evt.feature.getProperty('prop0'));
    infowindow.setContent(evt.feature.getProperty('prop0'));
    infowindow.setPosition(evt.feature.getGeometry().get());
    infowindow.open(map);
  })
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.563032, 45.495403]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.549762, 45.559673]
      },
      "properties": {
        "prop0": "value1"
      }
    }
  ]
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
...