Question

我今天花了很多时间试图弄清楚这是否可行，而且我还没有能够弄明白。

我有一张Google地图，其中包含一系列标记，这些标记位于不同的城镇。我的地图外还有一些按钮，可以平移到Lat，Lng位置。所以基本上，我有一张地图，里面有按钮，带有城镇或城市名称，当用户点击按钮时，它会平移到地图上的位置。

我想做的是，点击按钮时缩放到不同的等级。

我的问题是，在初始化地图时，我将其缩小，以便用户可以看到所有标记，但是当用户点击特定位置时，我希望放大地图。

这甚至可能吗？

这是我的html按钮代码：

<btn style="cursor:pointer" class="location" data-location="50.0515016,-110.7794323">Medicine Hat</btn>

然后是我的部分代码：

var marker;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);

  map.panTo(panPoint)
}

var map;

function initialize() {

  var mhbrewco = {
    lat: 50.062254,
    lng: -110.71656
  }
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.086594, -113.307591),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    mapTypeControl: false,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var BrewIcon = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2016/08/favicon-32x32-1.png';

  marker = new google.maps.Marker({
    map: map,
    position: mhbrewco,
    icon: BrewIcon
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Medicine Hat Brewing Company</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Address:</b>' +
    ' 1366 Brier Park Dr NW' +
    ' Medicine Hat, AB T1C 1Z7</p>' +
    '<p><b>Phone:</b> <a href="tel:+14035251260">(403)525-1260</a>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  jQuery(document).ready(function($) {
    $('.location').on('click', function() {
      pan($(this).data('location'));
   });
  });

以下是我正在使用的页面的链接：http://medicinehatbrewingcompany.ca/find-our-brews/

在评论的帮助下，我想出了这个...只需要为此添加一小段代码：

jQuery(document).ready(function($) {
    $('.location').on('click', function() {
    map.setZoom(12);
      pan($(this).data('location'));
   });

Answer 1

我相信您必须在panTo方法之前调用map.setZoom(2);。

所以你的fn看起来像这样：

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  map.setZoom(10); // or whatever lvl of zoom desired
  map.panTo(panPoint);
}

控制缩放级别使用外部按钮

1 个答案: