Google Maps API Закрыть InfoWindow (автоматически) - PullRequest
Новая
       9

Google Maps API Закрыть InfoWindow (автоматически)

0 голосов
/ 10 октября 2018

Есть ли у кого-нибудь предложения о том, как автоматически закрывать информационные окна при нажатии другого маркера?В настоящее время пользователь должен вручную закрыть информационное окно при нажатии другого маркера.Я надеялся, что есть метод, который я мог бы легко включить в свой код.Похоже, я создаю отдельные инфобоксы для каждого маркера.Когда мы будем расширять этот проект, у нас будет 10 тысяч плюс маркеров, которые будут разделены по различным категориям.

Я читал о предложении создать одно информационное окно и затем изменить его содержимое, но если я правильно понимаю свой код, я создаю отдельные информационные блоки для каждого маркера, так как они выходят из файла XML.Как я могу включить эту технику в мой текущий код?

Вы можете найти живой пример моего проекта здесь: http://www.officerage.com/maps/ Вот мой пример кода: 

 <!DOCTYPE html>
<html lang="en">
<head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title>A Basic Map</title>
    <style>
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    </head>

    <body>
    <div id="map"></div>
    <script>

    function infoCallback(infowindow, marker) {
    return function() { infowindow.open(map, marker); }; 
}
    function initMap() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(37.5, -122),
            mapTypeId: 'roadmap'
        };


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





        $.ajax({
    type: "GET",
    async: true,
    url: "testxml.xml",
    dataType: "xml",
    success:
    function (xml) {


    var places = xml.documentElement.getElementsByTagName("place");


    for (var i = 0; i < places.length; i++) {
    var lat = places[i].getAttribute('latitude');
    var long = places[i].getAttribute('longitude');
    var category = places[i].getAttribute('Info');
    var latLng = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker({
        position:  latLng,
        map: map,
        category:places[i].info,
        label:places[i].name

    });

    var infowindow = new google.maps.InfoWindow({
    content:category});
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow,marker));


}



    }



}


);

    }
    </script>


<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz_-TAwsP-dL_dsEkmz8sGEU1hyPYKHik&callback=initMap">
</script>
</body>
</html>

1 Ответ

0 голосов
/ 10 октября 2018

Чтобы изменить код для использования одиночного infowindow, переместив его на маркер, на который нажали, и обновив его содержимое, чтобы отразить данные для этого маркера, измените свой infoCallback, чтобы принять контент в качествеПервый аргумент: 

function infoCallback(content, marker) {
  return function() {
    infowindow.setContent(content);
    infowindow.open(map, marker);
  };
}
var infowindow;
function initMap() {
  infowindow = new google.maps.InfoWindow();
  // ...

Затем используйте его следующим образом: 

var places = xml.documentElement.getElementsByTagName("place");
for (var i = 0; i < places.length; i++) {
  var lat = places[i].getAttribute('latitude');
  var long = places[i].getAttribute('longitude');
  var category = places[i].getAttribute('Info');
  var latLng = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    category: places[i].info,
    label: places[i].name
  });
  google.maps.event.addListener(marker, 'click', infoCallback(category, marker));
}

подтверждение концепции скрипта

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

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map"></div>
<script>
  function infoCallback(content, marker) {
    return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  }
  var infowindow;

  function initMap() {
    infowindow = new google.maps.InfoWindow();
    var mapOptions = {
      zoom: 3,
      center: new google.maps.LatLng(37.5, -122),
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var xml = parseXml(xmlStr);
    var places = xml.documentElement.getElementsByTagName("place");
    for (var i = 0; i < places.length; i++) {
      var lat = places[i].getAttribute('latitude');
      var long = places[i].getAttribute('longitude');
      var category = places[i].getAttribute('Info');
      var latLng = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category: places[i].info,
        label: places[i].name
      });
      google.maps.event.addListener(marker, 'click', infoCallback(category, marker));
      bounds.extend(marker.getPosition());
    }
    map.fitBounds(bounds);
  }

  var xmlStr = '<places><place latitude="37.4529598" longitude="-122.1817252" Info="Menlo Park, CA"/><place latitude="37.43355" longitude="-122.2030209" Info="West Menlo Park, CA 94025"/><place latitude="37.424106" longitude="-122.1660756" Info="Stanford, CA"/></places>';

  function parseXml(str) {
    if (window.ActiveXObject) {
      var doc = new ActiveXObject('MicrosoftXMLDOM');
      doc.loadXML(str);
      return doc;
    } else if (window.DOMParser) {
      return (new DOMParser).parseFromString(str, 'text/xml');
    }
  };
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...