кнопки для увеличения или отображения определенных маркеров карты - PullRequest
Новая
       43

кнопки для увеличения или отображения определенных маркеров карты

0 голосов
/ 08 октября 2019

У меня есть 32 местоположения британских замков, при нажатии которых я хочу, чтобы маркер карты либо появился, либо увеличил масштаб уже существующего маркера карты.

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

<div class="england-castles castles-centred" style="display:none">
   <div class="col-xs-12 col-md-3">
      <button type="button" class="castle-styles castle">Windsor Castle</button> 
                    </div>
                    <div class="col-xs-12 col-md-3">
                        <button type="button" class="castle-styles castle">Leeds Castle</button>
                    </div>
                    <div class="col-xs-12 col-md-3">
                        <button type="button" class="castle-styles castle">Dover Castle</button>
                    </div>
                    <div class="col-xs-12 col-md-3">
                        <button type="button" class="castle-styles castle">Warwick Castle</button>
                    </div>
</div>

// javascript 

var castles = [
            ['windsorcastle', 51.483860, -0.606490],
            ['leedscastle', 51.248844, -0.630249],
            ['dovercastle', 51.129524, -1.321235],
            ['warwickcastle', 52.279472, -1.585041]
]

for( i = 0; i < castles.length; i++ ){
        var marker = new google.maps.Marker({
        position: {lat: castles[i][1], lng: castles[i][2]},
        map: map
    });

1 Ответ

0 голосов
/ 08 октября 2019

Один из вариантов - добавить широту и долготу замков в HTML-код, который определяет кнопки: 

  <div class="col-xs-12 col-md-3">
    <button type="button" class="castle-styles castle" data-lat="51.483860" data-lng="-0.606490">Windsor Castle</button>
  </div>

Затем используйте его для центрирования и масштабирования карты: 

$(".castle").click(function() {
  map.setCenter(new google.maps.LatLng(this.dataset.lat, this.dataset.lng));
  map.setZoom(15);
});

доказательство концептуальной скрипки

(обратите внимание, что улучшением будет использование данных от элементов с классом "замок", чтобы также заполнить маркеры на карте)

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

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  $(".castle").click(function() {
    console.log(this.dataset.lat + "," + this.dataset.lng);
    map.setCenter(new google.maps.LatLng(this.dataset.lat, this.dataset.lng));
    map.setZoom(15);
  });
  var castles = [
    ['windsorcastle', 51.483860, -0.606490],
    ['leedscastle', 51.248844, -0.630249],
    ['dovercastle', 51.129524, -1.321235],
    ['warwickcastle', 52.279472, -1.585041]
  ]

  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < castles.length; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: castles[i][1],
        lng: castles[i][2]
      },
      title: castles[i][0],
      map: map
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 60%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="england-castles castles-centred">
  <div class="col-xs-12 col-md-3">
    <button type="button" class="castle-styles castle" data-lat="51.483860" data-lng="-0.606490">Windsor Castle</button>
  </div>
  <div class="col-xs-12 col-md-3">
    <button type="button" class="castle-styles castle" data-lat="51.248844" data-lng="-0.630249">Leeds Castle</button>
  </div>
  <div class="col-xs-12 col-md-3">
    <button type="button" class="castle-styles castle" data-lat="51.129524" data-lng="-1.321235">Dover Castle</button>
  </div>
  <div class="col-xs-12 col-md-3">
    <button type="button" class="castle-styles castle" data-lat="52.279472" data-lng="-1.585041">Warwick Castle</button>
  </div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
...