Google Maps Cluster和地图外位置的下拉菜单

编程问答 2022-08-16

问题描述

我已经使用标记聚类创建了Google地图-位置数组如下所示

var locations = [
{
title: "Marker 1",lat: 0,lng:  0,info: "Info Window 1"
},{
title: "Marker 2",lng:  1,info: "Info Window 2"
},etc etc etc

我想在地图外创建一个下拉菜单，以添加“标题”，然后在选择时打开地图上的“信息窗口”。 过去我已经使用此代码成功实现了

for (var i = 0; i < markers.length; i++) {
    marker = 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>";

function addMarker(i) {
    var draftMarker = markers[i];
    var myLatLng = new google.maps.LatLng(draftMarker[1],draftMarker[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,map: map,title: draftMarker[0],icon: '<?PHP echo get_template_directory_uri(); ?>/images/location-marker.png'
    });

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

    return marker;

但这是针对位置使用以下格式

 map = new google.maps.Map(document.getElementById('map'),mapOptions);


var markers = [
["Marker 1","Infow Window 1"],["Marker 2",1,"Infow Window 2"],etc etc etc
];

如何使旧的下拉菜单代码与新数组配合使用？

已编辑!!!! 这是我现在拥有的代码-经过Rado建议的更改-唯一不起作用的是在下拉列表中选择项目时显示了InfoWindow。

<script type="text/javascript">
var map;
var info = new google.maps.InfoWindow();
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,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",{
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,title: draftMarker.title,icon: '<?PHP echo get_template_directory_uri(); ?>/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>

解决方法

一个疯狂的猜测：

function addMarker(i) {
    var draftMarker = markers[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: '<?php echo get_template_directory_uri(); ?>/images/location-marker.png'
    });

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

    return marker;

在您上一次编辑=>时，可以在addMarker函数中更改点击事件

google.maps.event.addListener(marker,function () {
    info.setContent(draftMarker.info);
    info.open(map,marker);
});
arraysarraysgoogle-mapsjavascriptmarkerclusterer