Google Maps下拉选择器显示InfoWindow [英] Google Maps Dropdown Selector to show InfoWindow

问题描述

我创建了一个带有群集标记的Google Map和一个显示每个位置的下拉菜单. 这个想法是，当您从下拉菜单中选择一个位置时，将显示信息窗口".

I have created a Google Map with Clustered Markers and a dropdown menu which displays each location. The idea is that when you select a location from the dropdown the InfoWindow is displayed.

一切都很好-除了最后一点.

Everything works great - except the last bit.

选择位置后，我无法从选择"下拉列表中显示信息窗口.

I can't get the Select dropdown to display the InfoWindow when a location is selected.

代码如下:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API-KEY]&amp;callback=initMap&amp;language=en"></script>
<script src="../[e-mail]"></script>

<script type="text/javascript">
var gmarkers = [];
var side_bar_html = "";

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 1, lng: 1},
  zoom: 3,
    minZoom: 1, 
    maxZoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location,
    icon: '../images/location-marker.png'
});
google.maps.event.addListener(marker, 'click', function(evt) {
  infoWin.setContent(location.info);
  infoWin.open(map, marker);
})
return marker;
});

var markerCluster = new MarkerClusterer(map, [], {
imagePath: '../images/m' 
});
markerCluster.setStyles(markerCluster.getStyles().map(function (style) {
style.textColor = '#fff';
return style;
}));
markerCluster.addMarkers(markers)
}

var locations = [
{
title: "Marker 1",
lat: 0,
lng:  0,
info: "Info Window 1"
},
{
title: "Marker 2",
lat: 0,
lng:  1,
info: "Info Window 2"
},
{
title: "Marker 3",
lat: 0,
lng:  2,
info: "Info Window 3"
},
{
title: "Marker 4",
lat: 1,
lng:  0,
info: "Info Window 4"
},
{
title: "Marker 5",
lat: 1,
lng:  1,
info: "Info Window 5"
},
{
title: "Marker 6",
lat: 1,
lng:  2,
info: "Info Window 6"
},
];

for (var i = 0; i < locations.length; i++) {
    marker = addMarker(i);
}

document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);' name=\"country\" class=\"wpcf7-form-control wpcf7-select form-control\" aria-invalid=\"false\"><option value=\"Please choose your country...\">Please choose your country...</option>"+side_bar_html+"</select>";

function addMarker(i) {
var draftMarker = locations[i];
var myLatLng = new google.maps.LatLng(draftMarker.lat, draftMarker.lng);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: draftMarker.title,
    icon: '../images/location-marker.png'
});

google.maps.event.addListener(location, 'click', function () {
    info.setContent(draftMarker.info);
    info.open(map, location);
});
gmarkers.push(location);
side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker.title + '<\/option>';

return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
map.setCenter(gmarkers[i].getPosition());
google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", initMap);

</script>

在Google Chrome浏览器的控制台中查看时，出现以下错误

I get the following error when viewed in the console in Google Chrome

Uncaught TypeError: gmarkers[i].getPosition is not a function

我尝试更改最后一位

function myclick(i) {
map.setCenter(gmarkers[i].getPosition());
google.maps.event.trigger(gmarkers[i], "click");
}

到

function myclick(i) {
var draftMarker = locations[I];
map.setCenter(new google.maps.LatLng(draftMarker.lat, draftMarker.lng));
google.maps.event.trigger(gmarkers[i], "click");
}

但是我得到了错误

Uncaught TypeError: map.setCenter is not a function

推荐答案

您的代码中存在多个问题.首先，请确保始终考虑范围.您需要将一些变量设置为全局变量，以便在未显式设置变量的函数中检索它们的值:

There are multiple issues in your code. First, make sure you always take scope into account. You need to set some of your variables as globals in order to retrieve their values in functions where you didn't explicitly set them:

var infoWin;
var map;

这就是为什么要获取"gmarkers [i] .getPosition不是函数"的原因.错误.

This is why you're getting the "gmarkers[i].getPosition is not a function" error.

然后，您要在initMap和addMarker中都添加标记及其相应的单击事件侦听器，但是单击它们时，仅触发第一个事件侦听器，这是信息窗口获胜的另一个原因没开您只需要在一个地方添加一次所有的代码，例如在addMarker中.此外，在应推送实际标记实例(即gmarkers.push(marker))时使用gmarkers.push(location).

Then, you're adding markers and their corresponding click event listeners in both initMap and addMarker, but when you click on them, you're triggering the first event listener only which is another reason the info windows won't open. You only need to add all that code once, in one place only, e.g. in addMarker. Furthermore you're using gmarkers.push(location) when you should be pushing the actual marker instances, i.e. gmarkers.push(marker).

我已将您的JS代码固定如下:

I've fixed your JS code as follows:

var gmarkers = [];
var side_bar_html = "";
var infoWin;
var map;
var locations = [
  {
    title: "Marker 1",
    lat: 0,
    lng: 0,
    info: "Info Window 1"
  },
  {
    title: "Marker 2",
    lat: 0,
    lng: 1,
    info: "Info Window 2"
  },
  {
    title: "Marker 3",
    lat: 0,
    lng: 2,
    info: "Info Window 3"
  },
  {
    title: "Marker 4",
    lat: 1,
    lng: 0,
    info: "Info Window 4"
  },
  {
    title: "Marker 5",
    lat: 1,
    lng: 1,
    info: "Info Window 5"
  },
  {
    title: "Marker 6",
    lat: 1,
    lng: 2,
    info: "Info Window 6"
  }
];

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 10, lng: 10 },
    zoom: 3,
    minZoom: 1,
    maxZoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
  });
  infoWin = new google.maps.InfoWindow();

  var markers = locations.map(function (location, i) {
    return addMarker(i);
  });

  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML =
    '<select onchange=\'myclick(this.value);\' name="country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false"><option value="Please choose your country...">Please choose your country...</option>' +
    side_bar_html +
    "</select>";

  var markerCluster = new MarkerClusterer(map, [], {
    imagePath: "https://www.takagi-j.com/test/marker-clusterer-example/images/m"
  });
  markerCluster.setStyles(
    markerCluster.getStyles().map(function (style) {
      style.textColor = "#fff";
      return style;
    })
  );
  markerCluster.addMarkers(markers);
}

function addMarker(i) {
  infoWin = new google.maps.InfoWindow();
  var draftMarker = locations[i];
  var myLatLng = new google.maps.LatLng(draftMarker.lat, draftMarker.lng);
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: draftMarker.title,
    icon:
      "https://www.takagi-j.com/test/marker-clusterer-example/images/location-marker.png"
  });
  google.maps.event.addListener(marker, "click", function (evt) {
    infoWin.setContent(draftMarker.info);
    infoWin.open(map, marker);
  });
  gmarkers.push(marker);
  side_bar_html +=
    "<option value=" +
    (gmarkers.length - 1) +
    ">" +
    draftMarker.title +
    "</option>";

  return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", initMap);

这篇关于Google Maps下拉选择器显示InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！