关于在drupal中实现谷歌地图框架的任何提示

Any tips on implementing a Google Maps frame into drupal?

本文关键字：框架 任何 提示 谷歌地图 实现 drupal      更新时间：2023-09-26

我有一个非常简单的谷歌地图，我想把它显示为你在我的drupal主页上看到的第一个东西。有什么建议可以让我把它做好吗？我试过使用一个名为insertFrame的模块，并使用他们的简写，但这是一个旧模块，我似乎无法让它工作。。。谢谢你的任何建议！

var overlay;
var myCenter=new google.maps.LatLng(##.######, -##.######);
var marker;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var myLatLng = new google.maps.LatLng(##.######, -##.######);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.MAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
var swBound = new google.maps.LatLng(##.######, -##.######);
var neBound = new google.maps.LatLng(##.######, -##.######);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
marker=new google.maps.Marker({
position:myLatLng,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
overlay = new USGSOverlay(bounds, srcImage, map);
}

function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.border = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);
};
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
};
USGSOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = 'hidden';
}
};
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == 'hidden') {
  this.show();
} else {
  this.hide();
}
}
};
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
};

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>

<div id ="panel">
  <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
  <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
</div>
<div id="map-canvas"></div>
</body>
</html>

在这种情况下，我认为您的代码足够自定义，可以直接进入模板，而不是在节点或块或类似的地方。

您的页面模板包含页面的标记，您可以覆盖此标记，以便为主页提供特定的模板。

要做到这一点，请将主题的page.tpl.php复制到page-front.tpl.php（如果主题没有page.tpl.php，则可以从主题的基本主题或drupal核心系统模块中获取），然后清除drupal缓存，以便获取新模板。

然后，您可以将地图画布div标记添加到您希望地图所在的位置。

然后将所有javascript代码复制到一个javascript文件中，并将其命名为map.js，然后将其放在主题中（如果主题有javascript或js目录，则放在该目录中）。

然后，您可以通过在您的主题template.php文件的template_preprocess_html（）函数中使用drupal_add_js（）为主页加载js文件，如下所示：

function THEMENAME_preprocess_html(&$variables) {
  // Add js for the homepage map.
  if (drupal_is_front_page()) {
    drupal_add_js(drupal_get_path('theme', 'THEMENAME') . '/js/map.js');
  }
}

或者，您可能想要编写一个自定义模块，实现一个打印mapdiv并添加map js的自定义块
您可以通过多种方式添加地图，因此这取决于您的需求，即哪种方式最适合您。

相关文章：