Google 地图集群和地图外位置的下拉菜单
Google Maps Cluster AND dropdown of locations outside map
我使用标记聚类创建了一个 google 地图 - 位置数组如下所示
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
我想在地图外创建一个下拉菜单,添加 'Title',然后在选中时在地图上打开信息窗口。
我过去使用这段代码成功地实现了这个
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", 0, 0, "Infow Window 1"],
["Marker 2", 0, 1, "Infow Window 2"],
etc etc etc
];
如何使旧的下拉菜单代码与新数组一起使用???
已编辑!!!!
这是我现在的代码——根据 Rado 建议的更改——唯一不起作用的是在下拉列表中选择项目时显示信息窗口。
<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
函数内的点击事件
google.maps.event.addListener(marker, 'click', function () {
info.setContent(draftMarker.info);
info.open(map, marker);
});
我使用标记聚类创建了一个 google 地图 - 位置数组如下所示
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
我想在地图外创建一个下拉菜单,添加 'Title',然后在选中时在地图上打开信息窗口。 我过去使用这段代码成功地实现了这个
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", 0, 0, "Infow Window 1"],
["Marker 2", 0, 1, "Infow Window 2"],
etc etc etc
];
如何使旧的下拉菜单代码与新数组一起使用???
已编辑!!!! 这是我现在的代码——根据 Rado 建议的更改——唯一不起作用的是在下拉列表中选择项目时显示信息窗口。
<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
函数内的点击事件
google.maps.event.addListener(marker, 'click', function () {
info.setContent(draftMarker.info);
info.open(map, marker);
});