javascript - 如何通过单击按钮更改 Google map 位置

Question

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

这是我的代码:

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

Answer 1

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

改变

info: '<strong>Architectural Art Crete - Office</strong><br>\ 5815 Dewey St, Hollywood, FL 33023, USA, 至

info: '<strong>Architectural Art Crete - Office</strong><br>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)); } });

此功能未正确关闭 }失踪了。
更新新代码后检查。