Question

我试图在不使用第三方JSF库的情况下在JSF页面中呈现谷歌地图。 （我在不使用第三方库的情况下加载谷歌地图）

当我调试我的页面时，我在Net选项卡中找到了谷歌地图图像。但它没有在我的页面中呈现。

1。为什么即使下载图像也不会在页面中呈现？请看下面的截图。 enter image description here

我在哪里犯错误。在这里，我也附上了我的代码。

MapBody.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
    <ui:insert name="geoContainer">
        <ui:include src="MapContainer.xhtml"/>
    </ui:insert>
</h:body>
</html>

MapContainer.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <h:panelGroup id="map-container" layout="block">
        <div id="map-canvas" style="height: 100%; width: 75%; margin: 0; padding: 0;"></div>
    </h:panelGroup>
    <h:outputScript library="js" name="geo-region.js"></h:outputScript>
</ui:composition>

geo-region.js //调用谷歌地图。

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

我试图解决的问题：

使用Asynchronous loading（正常的加载方式没有工作。所以尝试像这样加载，但结果是一样的 - 不工作）。
直接指定了样式属性。（从css文件调用没有解决。所以尝试这样）

我正在寻找我在这里所犯的错误。非常感谢任何帮助。

为什么谷歌地图没有在JSF页面中呈现？

0 个答案: