Question

我有以下带有地图画布的HTML：

   <div style="height:100%; width:100%;">
        <div id="map-canvas"></div>
    </div>

我有以下jQuery：

jQuery( document ).ready(function($) {

console.log(lat_long_vars.latitude);
console.log(lat_long_vars.longditude);

var map;
var map_properties = {
    center:new google.maps.LatLng(lat_long_vars.latitude,lat_long_vars.longditude),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map($('#map-canvas')[0], map_properties);

})

我还将谷歌地图CDN包含在我自己的jQuery之上。（https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize）

但是，地图画布不会显示。显而易见的问题可能是纬度和经度变量没有设置，但它们肯定是。任何人都可以在这里提出问题的建议吗？我不会撤回任何JS错误。

Answer 1

你需要：

为顶级div定义容器的高度和宽度（在我的代码段下面是html / body）。
定义lt div。

代码段

map-canvas

var lat_long_vars = {latitude: 42, longditude: -72};
jQuery(document).ready(function($) {

  console.log(lat_long_vars.latitude);
  console.log(lat_long_vars.longditude);

  var map;
  var map_properties = {
    center: new google.maps.LatLng(lat_long_vars.latitude, lat_long_vars.longditude),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map($('#map-canvas')[0], map_properties);

})

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

谷歌地图不在页面上显示，没有JS错误

1 个答案: