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

时间:2017-08-24 11:54:02

标签: spring dojo maps contentpane

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

任何人都可以指导我们吗?

1 个答案:

答案 0 :(得分:0)

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

下面我在谷歌搜索之后构建的一个示例(其中here),使用谷歌地图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)。

JC