doushitang4276 2014-04-09 21:21
浏览 22
已采纳

有关将Google Maps框架实施为drupal的任何提示？

i have this very simple google map that I want to be displayed as the first thing you see on my drupal homepage. Any suggestion on how I can get it on there nicely? I've tried using a module called insertFrame and using their shorthand, but it is an old module and I can't seem to get it working... Thanks for any and all advice!

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>
  • 写回答

1条回答 默认 最新

  • dongsiju1941 2014-04-10 06:44
    关注

    In this case I think your code is custom enough that it can go directly into your templates as opposed to in a node or a block or anything like that.

    Your page template contains the markup for your page and you can override this to have a specific template just for your home page.

    To do this copy your theme's page.tpl.php to page--front.tpl.php (if your theme doesn't have a page.tpl.php you can get it from your theme's base theme or else the drupal core system module) - then clear your drupal cache so the new template gets picked up.

    Then you would add your map canvas div markup in the place you want your map to go.

    Then copy all your javascript code into a javascript file and call it something like map.js and put it in your theme (in it's javascript or js directory if your theme has one).

    Then you can load your js file for the home page only by using drupal_add_js() in your template_preprocess_html() function of your template.php file of you theme like this:

    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');
  }
}

    Alternatively you might want to write a custom module that implements a custom block that prints the map div and adds the map js.
    There are a number of ways you can add the map so it depends on your requirements as to which is the best option for you.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题
  • ¥15 ogg dd trandata 报错
  • ¥15 高缺失率数据如何选择填充方式
  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件，像网易云音乐，QQ音乐他们的前端和后台部分是用的什么技术实现的?求解！
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗？
  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？