问题描述
我创建了一个带有群集标记的Google Map和一个显示每个位置的下拉菜单。 这个想法是,当您从下拉菜单中选择一个位置时,将显示“信息窗口”。
一切都很好-除了最后一点。
选择位置后,我无法从“选择”下拉列表中显示信息窗口。
代码如下:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API-KEY]&callback=initMap&language=en"></script>
<script src="../markerclustererplus@4.0.1.min.js"></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",lng: 1,info: "Info Window 2"
},{
title: "Marker 3",lng: 2,info: "Info Window 3"
},{
title: "Marker 4",lat: 1,info: "Info Window 4"
},{
title: "Marker 5",info: "Info Window 5"
},{
title: "Marker 6",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,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
解决方法
您的代码中存在多个问题。首先,请确保始终考虑范围。您需要将某些变量设置为全局变量,以便在未显式设置变量的函数中检索它们的值:
var infoWin;
var map;
这就是为什么您收到“ gmarkers [i] .getPosition不是函数”错误的原因。
然后,您在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",lng: 1,info: "Info Window 2"
},{
title: "Marker 3",lng: 2,info: "Info Window 3"
},{
title: "Marker 4",lat: 1,info: "Info Window 4"
},{
title: "Marker 5",info: "Info Window 5"
},{
title: "Marker 6",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);