如何在 dojo 内容窗格中呈现 googlemaps答案

【问题标题】：How to render googlemaps in a dojo content pane如何在 dojo 内容窗格中呈现 googlemaps
【发布时间】：2017-08-24 11:54:02
【问题描述】：

我有一个 spring/dojo 应用程序。要求是在 map 中的 stackcontainer/content-pane 中找到一个地址。首先想到的是重定向到谷歌地图，并且正在抛出 CORS 和 ACCESS_ORIGIN 问题。

谁能指导我们？

【问题讨论】：

标签： spring dojo maps contentpane

【解决方案1】：

不确定“重定向到谷歌地图”是什么意思，而且我对 spring 不熟悉。

下面是我在谷歌搜索后构建的一个示例（其中包括 here），它使用 google maps javascript api，并在 ContentPane 中显示地图（至少在我的环境中）。您需要提供您的 google API 密钥并根据您的环境调整配置：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Google maps demo</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen"> 
</head>
<body class="claro">
    <div id='theMap'></div>
    <script>var dojoConfig ={
                baseUrl: "", isDebug: true, async: true,
                packages: [{"name": "dojo", "location": "dojo-release-1.12.2-src/dojo"},   {"name": "dijit", "location": "dojo-release-1.12.2-src/dijit"},  
                ],
            };
    </script>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"></script>
    <script>
        require([
            'dijit/layout/ContentPane',
            'myApp/gmapsLoader!http://maps.google.com/maps/api/js?v3&key=YOUR_GOOGLE_API_KEY'
        ], function (ContentPane) {
            var theMap = new ContentPane({style: {height: '1000px'}}, 'theMap');
            var mapOptions = {
                    center : new google.maps.LatLng(-34.397, 150.644),
                    zoom : 8,
                    mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            var theMapContent = new google.maps.Map(theMap.domNode, mapOptions);
            theMap.startup();
        });
    </script>
</body>
</html>

它依赖于 gmapLoader，描述为 here（名称为 async.js）。

【讨论】：