1

Добрый день! Помогите, пожалуйста, разобраться со следующей ситуацией: необходимо реализовать карту google maps на которой будут отображены только те маркеры, которые находятся в заданном радиусе от определенной точки. Т.е. нужна реализация "объектов поблизости". На данный момент рабочий код такой:

var map,
    marker,
    markerArray = [];

function initMap() {

  var map = new google.maps.Map(document.getElementById('similar-map'), {
    center: new google.maps.LatLng(34.784167, 32.453444),
    zoom: 13
  });

  downloadUrl('mapmarkers.xml', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {

      var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng'))
      );

      var marker = new google.maps.Marker({
        map: map,
        position: point
      });

      markerArray.push(marker);

    });
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

Как в рамках данного кода можно реализовать отображение только тех маркеров, которые находятся, скажем, в радиусе 10 км от центра карты?

1 ответ 1

0

Если в рамках данного кода, то нужно:

  1. подключить библиотеку geometry:

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

  1. взять центр карты:

var center = map.getCenter();

  1. вычислить расстояние от точки до центра:

var distance = google.maps.geometry.spherical.computeDistanceBetween(point, center)

  1. если distance <= 10000 (метров), добавляем маркер:
5
  • а четвертый пункт как должен выглядеть? if(distance <= 10000) { var marker = new google.maps.Marker({ map: map, position: point }); } Такой код ничего не выдает.
    – EuRo
    15 авг 2017 в 11:53
  • Насколько вообще скрипт грамотен или лучше вообще переписать все заново?) Я только начал во всем этом разбираться, отсюда вопросы подобные...
    – EuRo
    15 авг 2017 в 11:59
  • Да, так и должен. Не выдает в смысле отображает вообще все маркеры вне зависимости от расстояния? 16 авг 2017 в 4:04
  • Нормальный скрипт :) 16 авг 2017 в 4:08
  • Все заработало, спасибо! :) Это я тупанул - добавил еще инфо-окна, а marker.addListener('click', function() {}); оставил за условием. В итоге метки вообще не ставились. Убрал click во внутрь if и все заработало.
    – EuRo
    16 авг 2017 в 7:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.