0

亲爱的 openlayers 专家：我从 openlayers 食谱中的第一个示例开始（不均匀；有更好的示例吗？），将 zoom max 更改为 setCenter 调用，并尝试了它。变焦有效，中心无效。这可能是一个真正简单的问题，但对新手来说却很困惑。我也不确定 rcp1_map 住在哪里，大概是世界地图：

<!DOCTYPE html>
<html>
    <head>
    <title>Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
              src="http://openlayers.org/api/OpenLayers.js"></script>
    <style> html, body { width: 80%; height: 80%; margin: 1em; padding: 1em; } </style>

    <script type="text/javascript">
        function init() {
            var map = new OpenLayers.Map("rcp1_map");
            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);
            map.setCenter(new OpenLayers.LonLat(34.05,118.25), 5);
        }
    </script>
    </head>

<body onload="init()">
    <h1>Hello, Los Angeles</h1>
    <div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>

并且，而不是rcp1_map，我应该或可以将完整的世界地图下载到某处的街道并安装它吗？

入门建议表示赞赏。

/iaw

4

1 回答 1

0

首先，如果您在调用onload="init()"as 之前定义地图：

var map;
function init() {
    map = new OpenLayers.Map("rcp1_map");
    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);
    map.setCenter(new OpenLayers.LonLat(34.05,118.25), 5);
}

然后 setCenter 将工作。问题是你现在在谷歌坐标中输入坐标。请参阅http://docs.openlayers.org/library/spherical_mercator.html。

谷歌墨卡托中的洛杉矶坐标为 -13180189,4018753。查看http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/以了解 Google Mercator 中事物的坐标。

至于rcp1_map，那是地图进入页面正文的 div 的 id。

这是最终代码：

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
          src="http://openlayers.org/api/OpenLayers.js"></script>
<style> html, body { width: 80%; height: 80%; margin: 1em; padding: 1em; } </style>

<script type="text/javascript">
    var map;
    function init() {
        map = new OpenLayers.Map("rcp1_map");
        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);
        map.setCenter(new OpenLayers.LonLat(-13180189,4018753), 5);
    }
</script>
</head>

<body onload="init()">
<h1>Hello, Los Angeles</h1>
<div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>

我希望这有帮助。

于 2013-10-29T17:54:02.283 回答