谷歌地图下拉选择器显示信息窗口

Posted 2023-03-28

【中文标题】谷歌地图下拉选择器显示信息窗口

【英文标题】：Google Maps Dropdown Selector to show InfoWindow

【发布时间】：2020-12-09 02:46:07

【问题描述】：

我创建了一个带有聚集标记的谷歌地图和一个显示每个位置的下拉菜单。 这个想法是，当您从下拉列表中选择一个位置时，会显示 InfoWindow。

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

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 的控制台中查看时出现以下错误

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

【问题讨论】：

Google Maps Cluster AND dropdown of locations outside map 的重复项（尽管您可能希望接受该问题的答案并删除对该问题的编辑，然后将此问题链接到该问题作为后续处理）。添加一个 [mcev]（包括所需的 HTML/CSS 并删除自定义图标的链接）也会很有帮助。

我不知道如何将其添加为上一篇文章的后续 - 抱歉！这只是我试图解决这个问题的最后一部分，但想提供所有代码......！

that question 的答案是否解决了您最初的问题？如果没有，你应该继续那里，直到你得到你需要的答案。如果它确实回答了原始问题accept the answer，那么从这个问题中添加一个指向该问题的链接作为上下文（但不一定是必需的）可能会很有用。

推送gmarkers数组中的标记，而不是location，它甚至不是一个变量。 gmarkers.push(draftMarker);

嗨@Rado 抱歉，不确定您指的是哪一行？你的意思是function myclick ??还是这条线gmarkers.push(location);？如果我改变后者，它会破坏地图？

【参考方案1】：

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

var infoWin;
var map;

这就是您收到“gmarkers[i].getPosition is not a function”错误的原因。

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

我已将您的 JS 代码修复如下：

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