无法让Google地图刷新或重绘

时间:2015-08-05 05:05:14

标签: javascript jquery html google-maps

我正在打电话

// require modules
var gulp = require('gulp');
var csslint = require('gulp-csslint');

csslint.addRule({
    //rule information
    id: "rule-id",
    name: "Rule name",
    desc: "Short description of rule",
    browsers: "Affected browsers",

    //initialization
    init: function(parser, reporter){
        var rule = this;

        //rule initialization
    }
});

// CSS linting task
gulp.task('csslintfred', function(done) {
    return gulp.src('modules/smsc/client/css/parsley.css')
        .pipe(csslint('.csslintrc'))
        .pipe(csslint.reporter())
        .pipe(csslint.reporter(function(file) {
            if(!file.csslint.errorCount) {
                done();
            }
        }));
});


has no method 'addRule'
    at Object.<anonymous> (C:\SMS\Projects\sms_connect\config\gulp-tasks\parsley.js:13:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at requireDir (C:\SMS\Projects\sms_connect\node_modules\require-dir\index.js:116:33)
    at Object.<anonymous> (C:\SMS\Projects\sms_connect\gulpfile.js:14:1)
    at Module._compile (module.js:456:26)

在我的窗口中调整大小事件,但是当我调整窗口大小时,地图变为灰色。 调整大小的代码正在被点击,我在Chrome控制台窗口中看不到任何错误。我有什么遗失的吗?

这是我的代码,其中包含我页面的js脚本中的所有内容,其中两个图片有助于显示之前和之后的内容

&#13;
&#13;
google.maps.event.trigger(map, "resize");
&#13;
$(document).ready(function() {
  var map = null;
  google.maps.event.addDomListener(window, 'load', initializeMap);

  var x = window.innerHeight;
  var list = $('#theList');
  var pagedListHeight = $('.pagedList').height();
  list.textContent = "height: " + (x - 55 - pagedListHeight);
  list[0].style.height = (x - 55 - pagedListHeight) + 'px';

  document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
  document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

  function initializeMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("GoogleResultMap"), mapProp);
  }

  $(window).resize(function() {
    x = window.innerHeight;
    list = $('#theList');
    pagedListHeight = $('.pagedList').height();
    list.textContent = "height: " + (x - 55 - pagedListHeight); // 55 is the nav bar height
    list[0].style.height = (x - 55 - pagedListHeight) + 'px';

    document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
    document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

    google.maps.event.trigger(map, "resize");
  });

});
&#13;
&#13;
&#13;

在窗口调整大小之前,然后在

之后

before window resize

enter image description here

1 个答案:

答案 0 :(得分:1)

您的问题是由于您要在包含地图的<div id="GoogleResultMap"> <div>内以书面形式进行。 谷歌地图不是这样的。尽量不要编写或查看警报所需的值。

我替换了你的代码

 document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);

使用此简单的提醒消息

alert("height: " + (x - 65));

并显示地图