用于缩放或显示特定地图标记的按钮

Posted 2023-03-28

【中文标题】用于缩放或显示特定地图标记的按钮

【英文标题】：buttons to either zoom or show specific map markers

【发布时间】：2020-02-06 00:20:06

【问题描述】：

我有 32 个英国城堡的位置，单击这些位置时，我希望地图标记要么显示出来，要么放大到已经存在的地图标记中。

例如，当点击温莎城堡按钮时，我希望温莎城堡的地图标记在我拥有的谷歌地图 API 上弹出。

<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
    );

【问题讨论】：

Open infoWindows from an external link outside of the google map的可能重复

【参考方案1】：

一种选择是将城堡的纬度和经度添加到定义按钮的 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);
);

proof of concept fiddle

（请注意，增强功能是使用“城堡”类元素中的数据来填充地图上的标记）

代码 sn-p：

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>

【讨论】：

如果这回答了您的问题，请accept it