Question

我在我们的CMS搜索工具旁边使用了Google地图，并且我根据搜索在一个列表和Google地图上成功返回商店。我似乎无法工作的是地图自动设置缩放并使所有返回的标记适合地图。我已经看过很多关于做类似的其他帖子，但似乎都与map API的v2有关。这就是我试图设置缩放和适合度。

var iconBase = '/img/';
var icons = {
  parent: {
    icon: iconBase + 'parent.png'
  },
  child: {
    icon: iconBase + 'child.png'
  }
}
var locations = [
  {exp:low_search:results query="{segment_3}" backspace="1"}
  ["{title}", {latitude}, {longitude}, "{type}", "<p>{street_address}<br> {city}<br> {zip}</p>", "{website}" ],
  {/exp:low_search:results}
];

var map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var markerBounds = new google.maps.LatLngBounds();

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,
    icon: locations[i][3] == "Yes" ? '/img/parent.png' : '/img/child.png',
    address: locations[i][4]
  });

markerBounds.extend(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent('<h2>' + locations[i][0] + '</h2>' + this.address + '<p><a href="' + locations[i][5] + '">website</a>');
        infowindow.open(map, marker);
    };
  })(marker, i));
}

map.fitBounds(markerBounds);

我在哪里失败？

澄清一下，当我删除标记边和合适的边框时，当我看到工作地图时。控制台似乎在markerBounds.extend(marker);

上出错

Answer 1

容易错过。你给markerBounds.extend()一个标记对象，但它实际上需要一个google.maps.LatLng对象。试试这个：

var marker, i, markerLatLng;

for (i = 0; i < locations.length; i++) {
    if (locations[i].length > 0) {
        markerLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    } else {
        markerLatLng = new google.maps.LatLng(37.778190, -122.420434);
    }
  marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: locations[i][3] == "Yes" ? '/img/parent.png' : '/img/child.png',
    address: locations[i][4]
  });

  markerBounds.extend(markerLatLng);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent('<h2>' + locations[i][0] + '</h2>' + this.address + '<p><a href="' + locations[i][5] + '">website</a>');
        infowindow.open(map, marker);
    };
  })(marker, i));
}

map.fitBounds(markerBounds);

我已经声明了一个新变量，它在for循环中为其分配了一个google.maps.LatLng对象，然后传递给markerBounds.extend()方法。

从结果集中自动设置Google地图缩放

1 个答案: