ReferenceError：使用 osm 层时未定义 OpenLayers答案

【问题标题】：ReferenceError: OpenLayers is not defined while using osm layerReferenceError：使用 osm 层时未定义 OpenLayers
【发布时间】：2015-12-22 09:33:15
【问题描述】：

我正在使用 openLayer3 和 osm 绘制地图，现在尝试在地图上绘制折线

1：折线不显示，而且我在浏览器中收到错误 ReferenceError：未定义 OpenLayers

以下是以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>
<!-- code to draw the polyline on the map-->

    var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
    map.addLayer(lineLayer);
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
    var points = new Array(
            new OpenLayers.Geometry.Point(103.987305, 1.355333),
            new OpenLayers.Geometry.Point(103.987262, 1.354432)
    );

    var line = new OpenLayers.Geometry.LineString(points);
    var style = {
        strokeColor: 'white',
        strokeOpacity: 0.5,
        strokeWidth: 5
    };
    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    lineLayer.addFeatures([lineFeature]);

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
          lineLayer 
        ],

        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false,

            })
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([103.986908, 1.353199]),
            rotation: 68*Math.PI/180,
            zoom: 18
        })
    });



</script>

</body>
</html>

我是新手请说我哪里错了

【问题讨论】：

标签： compiler-errors openstreetmap openlayers-3

【解决方案1】：

请注意，OpenLayers 2 和 3 具有不同的 API。您的代码位于 OpenLayers 2 中，并且您已加载 OpanLayers 3(ol.js) 脚本。对于 ol3 示例，请查看源代码 here 。如果您使用的是 OpenLayers 2，请使用以下语法声明地图。

<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script>
<!-- code to draw the polyline on the map-->

var   map = new OpenLayers.Map({
   div: "map",
  allOverlays: true
});

var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});

// note that first layer must be visible
map.addLayers([osm, gmap]);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();



</script>

</body>
</html>

【讨论】：

那里我只有演示请说我应该改变cdn是什么意思
如果添加 openlayer3 的 CDN，我得到的错误是地图未定义，请帮助我在上面的示例中进行更改以使其正常工作
@DhanaLaxshmi 尝试在您的代码中使用 src="dev.openlayers.org/OpenLayers.js" 而不是 src="openlayers.org/en/v3.11.2/build/ol.js"
404 Not Found - localhost:63342/OPenLayer3/rotateMap/dev.openlayers.org/…" OpenLayers.js ReferenceError: ol is not defined 请帮忙
不走运我得到错误有 ReferenceError: ol is not defined var map = new ol.Map({

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div style="width:80%; height:80%; position:fixed; border: 1px solid;" id="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>

    var lineString = new ol.geom.LineString([
        [103.985150, 1.349480],
        [103.985656, 1.350743]
    ]);
    lineString.transform('EPSG:4326', 'EPSG:3857');

    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: lineString,
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'yellow',
                opacity: 0.5,
                width: 15
            })
        })
    });

    var view = new ol.View({
        center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326','EPSG:3857'),
        zoom: 18
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            lineLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: view
    });



</script>

</body>
</html>

【讨论】：