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

问题描述

我已经使用标记聚类创建了谷歌地图-位置数组看起来像这样

I have created a google map using Marker Clustering - the location array looks like this

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

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

I want to create a Dropdown menu outside the map that adds the 'Title' and then when selected opens the InfoWindow on the map.I have implemented this successfully in the past using this code

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;

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

But this was using the following format for the locations

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


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

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

How do I make the old Drop down menu code work with the new array ???

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

EDITED !!!!This is the code I have now - with the change suggested by Rado - the only thing that doesn't work is showing the InfoWindow when selecting the item in the drop down.

<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, '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: '<?php echo get_template_directory_uri(); ?>/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>

推荐答案

通过疯狂的猜测:

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函数中的点击事件

---

By your last edit => change click event inside addMarker function with this

google.maps.event.addListener(marker, 'click', function () {
    info.setContent(draftMarker.info);
    info.open(map, marker);
});

这篇关于Google Maps Cluster和地图外位置的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！