繁体   English   中英

如何使用Dojo 1.9显示地理地图

[英]How to display geographic map using dojo 1.9

我对使用dojo 1.9的简单地理地图有特殊的要求。 我从openlayer站点下载了openlayer.js,但是当我运行页面时,仍然没有任何显示。 如果有人能帮助我解决我末日所缺少的东西,将不胜感激。 请找到下面的代码。

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../../dijit/themes/tundra/OpenLayers.js"></script>
<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript" src="src.js"></script>
</head>
</html>

Dojo容器内的OpenLayers映射:

<!DOCTYPE html>
<html>
    <head>
        <link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
        <script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
        <script src='//cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js'></script>
        <style type='text/css'>
        html,body,#border,#map { margin:0; width:100%; height:100%; }
        </style>
    </head>
    <body class='claro'>
        <div id='border' data-dojo-type='dijit/layout/BorderContainer'>
            <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"center"'>
                <div id='map'></div>
            </div>
            <div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"trailing"'>
                Just an example
            </div>
        </div>
        <script type='text/javascript'>
        require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
            ready(function () {
                Parser.parse().then(function () {
                    var map = new OpenLayers.Map({
                        div:'map',
                        displayProjection:new OpenLayers.Projection('EPSG:4326'),
                        projection:new OpenLayers.Projection('EPSG:900913')
                    });
                    map.addLayer(
                        new OpenLayers.Layer.OSM()
                    );
                    map.setCenter(
                        new OpenLayers.LonLat(0, 0),
                        2
                    );
                });
            });
        });
        </script>
    </body>
</html>

100%的宽度和高度会扩展所有内容以填充视口。 虽然您不需要扩展到100%,但是需要在这些元素上设置尺寸。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM