Карта Google Cluster при щелчке по боковой панели элементов открывает конкретное информационное окно - PullRequest
Новая
       36

Карта Google Cluster при щелчке по боковой панели элементов открывает конкретное информационное окно

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

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

<html>
<head>
<script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBFLmEBCM9NFv4yDK6oXwDKX3FZjmvVqUk'></script>
<script type='text/javascript'  src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
</head>
<body>



    <div style="width:50%;float:left;">
    <div id="map"></div>
    <div style="width:50%; float:left;">
      <a href="#" onclick="myClick(0);">Hello 1</a>
      <a href="#" onclick="myClick(1);">Hello 2</a>
      <a href="#" onclick="myClick(2);">Hello 3</a>
      <a href="#" onclick="myClick(2);">Hello 4</a>

    </div>
    </div>
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {
          lat: 35.1264,
          lng: 33.4299
        }
      });
      var infoWin = new google.maps.InfoWindow();
      // Add some markers to the map.
      // Note: The code uses the JavaScript Array.prototype.map() method to
      // create an array of markers based on a given "locations" array.
      // The map() method here has nothing to do with the Google Maps API.
      var markers = locations.map(function(location, i) {
        var marker = new google.maps.Marker({
          position: location,
          icon:'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
        });
        google.maps.event.addListener(marker, 'mouseover', function(evt) {
          infoWin.setContent(location.info);
          infoWin.open(map, marker);

        })
        return marker;
      });

      // markerCluster.setMarkers(markers);
      // Add a marker clusterer to manage the markers.
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });

    }
    var locations = [   
    {
    lat: 35.1218939381583,
    lng: 33.42075903167722,
    info: " Hello 1"
    },

    {
    lat: 35.11596152729056,
    lng: 33.42702467193601,
    info: " Hello 2"
    },

    {
    lat: 35.116312569544064,
    lng: 33.43535024871824,
    info: " Hello 3"
    },

    {
    lat: 35.11497860093425,
    lng: 33.430372068786596,
    info: " Hello 4"
    },
    ];
    google.maps.event.addDomListener(window, "load", initMap);



    //on click function
      function myClick(id) {
        google.maps.event.trigger(markers[id], 'click');
      }
    </script>
    <style>
    #map {
      height: 950px;
    }
    .map-img{float:left;}
    .map-title{width:100%; float:left;}
    </style> 

    </body>
    </html>

Кластер Google работает нормально, но при нажатии на элемент боковой панели он не отображался в информационном окне.

1 Ответ

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

Маркеры, которые «кластеризованы», не добавляются на карту.В вашей функции myClick добавьте их на карту или увеличьте масштаб, чтобы кластер "разгруппировал" их. 

function myClick(id) {
  map.setCenter(markers[id].getPosition());
  map.setZoom(16);
  google.maps.event.trigger(markers[id], 'mouseover'); // to display InfoWindow
}

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

screenshot of resulting map after clicking

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

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  height: 100%;
  width: 50%;
  float: right;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<div style="width:100%;height:100%;">
  <div id="map"></div>
  <div style="width:50%; float:left;">
    <a href="#" onclick="myClick(0);">Hello 1</a><br>
    <a href="#" onclick="myClick(1);">Hello 2</a><br>
    <a href="#" onclick="myClick(2);">Hello 3</a><br>
    <a href="#" onclick="myClick(3);">Hello 4</a><br>

  </div>
</div>
<script>
  var markers;
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 35.1264,
        lng: 33.4299
      }
    });
    var infoWin = new google.maps.InfoWindow();
    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    markers = locations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location,
        icon: 'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
      });
      google.maps.event.addListener(marker, 'mouseover', function(evt) {
        infoWin.setContent(location.info);
        infoWin.open(map, marker);

      })
      return marker;
    });

    // markerCluster.setMarkers(markers);
    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [{
      lat: 35.1218939381583,
      lng: 33.42075903167722,
      info: " Hello 1"
    },

    {
      lat: 35.11596152729056,
      lng: 33.42702467193601,
      info: " Hello 2"
    },

    {
      lat: 35.116312569544064,
      lng: 33.43535024871824,
      info: " Hello 3"
    },

    {
      lat: 35.11497860093425,
      lng: 33.430372068786596,
      info: " Hello 4"
    },
  ];
  google.maps.event.addDomListener(window, "load", initMap);



  //on click function
  function myClick(id) {
    map.setCenter(markers[id].getPosition());
    map.setZoom(16);
    google.maps.event.trigger(markers[id], 'mouseover');
  }
</script>
...