Question

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

这是我的代码：

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

SCRIPT：

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

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

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

如何通过单击按钮更改Google Map位置

2 个答案: