Question

我正在尝试在bootbox对话框中创建一个地图。这是代码。

bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });

它会创建对话框，在底部创建带有Google徽标的地图框，但不会加载地图。它仍然是灰色的。

我发现如果在对话框显示后打开或关闭Chrome开发者工具，则会渲染地图。

有什么建议吗？

评论后编辑：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="google-map/google-map.html">

    <button onclick="ft()">Open Map</button>

    <script>
        var ft = function(){
            bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});    
        }
    </script>
</body>

Answer 1

设置google-map的高度显示：

<style>
  google-map {
    height: 600px;
  }
</style>
<script>
  bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="google-map/google-map.html">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>

<body>
  <style>
    google-map {
      height: 600px;
    }
  </style>
  <script>
    bootbox.alert({
      title: 'test',
      message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
    })
  </script>
</body>

^codepen

在bootbox中加载聚合物元素

1 个答案: