javascript - OpenLayers:OSM 未显示在 div 上

Question

我尝试使用以下代码将 OpenStreetMaps 中的 map 内容加载到混合移动应用程序内的 div 中:

-JS:

.controller('myCtrl', function($scope, $state, $ionicPopup, $cordovaGeolocation, Util)
                {

            if (! $scope.firstloaded)
            {
            var map = new OpenLayers.Map("basicMap");

             var mapnik = new OpenLayers.Layer.OSM();

             var fromProjection = new OpenLayers.Projection("EPSG:4326");

             // Transform from WGS 1984
             var toProjection = new OpenLayers.Projection("EPSG:900913");

             // to Spherical Mercator Projection
             var position = new OpenLayers.LonLat(13.41,52.52).transform(fromProjection, toProjection);

             var zoom = 15;

             map.addLayer(mapnik);
            map.setCenter(position, zoom );

            $scope.firstloaded = true;
            }

-HTML:

<label class="item item-input">
      <span class="input-label">Location</span>
      <div id="basicMap" style="height:250px"></div>
    </label>

..但是，我不知道为什么 map 没有显示在div上。

那么，代码有什么问题吗？如何解决这个问题？

Answer 1

查看下面提到的简单示例 OpenStreetMap Example .

一旦它起作用，您就可以对您的实现进行扩展，因为它将具备可以增强的工作代码库的所有先决条件。