OpenLayers：OSM 没有出现在 div

Question

我正在尝试使用以下代码将 OpenStreetMaps 中的地图内容加载到我的混合移动应用程序中的 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>

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

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

Answer 1

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

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

OpenLayers：OSM 没有出现在 div

OpenLayers: OSM doesn't show up on div

html

javascript

openlayers

angularjs

ionic-framework