如何通过单击按钮更改 Google 地图位置答案

【问题标题】：How to change Google Map location by clicking a button如何通过单击按钮更改 Google 地图位置
【发布时间】：2016-09-22 14:25:49
【问题描述】：

我正在尝试制作一个按钮来更改我的地图位置。我已经看到了很多答案，但我似乎无法让这些脚本在我的地图或我的网站上运行。我很困惑，我不明白为什么它们不起作用。

这是我的代码：

HTML：

<div class="info-map">
    <ul class="loks">
        <li class="active">
            <a id="link1" href="#office" data-toggle="tab">office</a>
        </li>
        <li>
            <a id="link2" href="#showroom" data-toggle="tab">showroom</a>
        </li>
    </ul>
</div>

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

CSS：

  #map {
    height: 400px;
  }

  .info-map {
    position: absolute;
    z-index: 1;
    background: white;
    top: 30px;
    left: 8%;
  }

脚本：

  var map;
function initMap()    { 

var office = {
  info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA',
  lat: 26.0020213,
  long: -80.2058833
};

var showroom = {
  info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657',
  lat: 41.939670,
  long: -87.655167
};

var locations = [
    [office.info, office.lat, office.long, 0],
    [showroom.info, showroom.lat, showroom.long, 1],
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  center: new google.maps.LatLng(26.0020213, -80.2058833),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

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

  google.maps.event.addListener(marker, 'click', (function (marker, i) {
      return function () {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
      }
  })(marker, i));
}
}

我发现这个 googleAPI 解决方案对我有一点帮助，但我似乎无法让它同时适用于这两个位置

google.maps.event.addDomListener(document.getElementById('link2'),
'click', function () {

map.setCenter(new google.maps.LatLng(10.23,123.45));
});

【问题讨论】：

标签： javascript google-maps google-maps-api-3 location maps

【解决方案1】：

您的代码有问题。请正确关闭info:数据。你错过了单引号和逗号。

改变

info: 'Architectural Art Crete - Office \ 5815 Dewey St, Hollywood, FL 33023, USA, 到

info: 'Architectural Art Crete - Office 5815 Dewey St, Hollywood, FL 33023, USA',

查看更新的代码。

var map;
function initMap()    { 

    var office = {
      info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA',
      lat: 26.0020213,
      long: -80.2058833
    };

    var showroom = {
      info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657',
      lat: 41.939670,
      long: -87.655167
    };

    var locations = [
        [office.info, office.lat, office.long, 0],
        [showroom.info, showroom.lat, showroom.long, 1],
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(26.0020213, -80.2058833),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

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

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
          }
      })(marker, i));
    }
}

这里有一个修复：

google.maps.event.addDomListener(document.getElementById('link2'), 'click', function () { map.setCenter(new google.maps.LatLng(10.23,123.45)); } });

此功能未正确关闭，缺少}。
更新新代码后检查。

【讨论】：

感谢您指出这一点，我已解决。仍然无法使按钮工作:(

【解决方案2】：

您的纬度和经度似乎也是一个问题。使用以下内容并确保将这些函数包含在 initMap 函数中。它会起作用的。

            google.maps.event.addDomListener(document.getElementById('link2'),
                                             'click', function () {
                map.setCenter(new google.maps.LatLng(showroom.lat, showroom.long));
            });
            google.maps.event.addDomListener(document.getElementById('link1'),
                                             'click', function () {
                map.setCenter(new google.maps.LatLng(office.lat, office.long));
            });

【讨论】：