最近のプロジェクトでも同じ要件がありました。これはjavascriptで解決されました。これを行うための特別な方法はありません。
参照してくださいhttps://www.transpower.co.nz/projectsを
ここにあなたを始めるためのいくつかのコードがあります:
(function ($, Drupal, window, document, undefined) {
// ...
$(function(){
if($(".not-front .openlayers-map").length && !$('.node-type-project').length) { // only run when there is actually a map on the page, but not on the home page
if ($('body').hasClass('page-community-initiatives')) {
is_ci = true;
}
mapData = $(".openlayers-map").data('openlayers').openlayers;
pointLayers = mapData.getLayersByClass("OpenLayers.Layer.Vector");
// cycle through all layers and points on those layers, adding the points to an array
for (var i in pointLayers) {
for (var j in pointLayers[i].features) {
pointData.push(pointLayers[i].features[j]);
}
}
// if we've pulled out some points, go make a list
if (pointData.length) {
makeList(pointData, ".pane-openlayers-map");
} else {
$('.pane-openlayers-map').append('<div class="no-results"><p>Your search returned no results, please try again.</p></div>')
}
// add event listener to the map to be fired whenever the user interacts with it.
// calls refreshList function above
mapData.events.on({
"moveend": refreshList
});
Drupal.openlayers.popup.popupSelect.events.on({
"featurehighlighted": popupOpen,
"featureunhighlighted": popupClose
});
}
});
})(jQuery, Drupal, this, this.document);
JSファイル全体をテーマからダウンロード(非圧縮)できます。必要に応じて変更してください。