时间戳

首页 > 解决方案 > 地图不显示

javascript - 地图不显示

问题描述

我有一张带有osm的openlayers的地图。我看不到地图。它以前工作，但突然它不起作用。当我使用最简单的设置来显示地图时，它可以工作。

我尝试了一些不同的方法，例如解构并查看代码。我将 CDN 用于 css 和 js。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers     /openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
        .map {
          height: 400px;
          width: 100%;
        }

        #header {
            text-align: center;
        }
      </style>
  <title>Open Layers testing</title>
</head>
<body>
<h2>My Map</h2>
<header>
    <div id="header">
    <button id="flyttkanpp" onclick="flytt()">Flytt 300 meter</button>
    </div>
</header>
<div id="map" class="map"></div>
<script type="text/javascript">


    var baseMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        target: 'map',
        view: view,
        layer: [layer]
    });
    var view = new ol.View({
      center: center,
      zoom: 6
    });
    var center = ol.proj.fromLonLat([37.41, 8.82]);
    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    var featureMarker = new ol.Feature({
        geometry: new ol.geom.Point(
        ol.proj.fromLonLat([10.7461, 59.9127])
        )  // Cordinates of Netsense Skien
    });
    function flytt() {
        featureMarker.getGeometry().translate(0, 100);
    };

    var vectorSource = new ol.source.Vector({
        features: [featureMarker]
    });

    var markerVectorLayer = new ol.layer.Vector({
        source: vectorSource,
    });

    map.addLayer(markerVectorLayer);

    //Set custom marker

    featureMarker.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
            scale: 0.5,
            opacity: 0.75,
            crossOrigin: 'anonymous',
            src: 'location.png'
        }))
    }));

  </script>
</body>
</html>

我也有一个 onclick 功能。Wich 一直在工作，但现在地图没有显示。

标签： javascriptopenlayers

解决方案

您应该重新排序您的代码。mapuses layerand view(which uses center) 所以需要在它之前声明它们。

另外：layer 需要layers。

var center = ol.proj.fromLonLat([37.41, 8.82]);

var view = new ol.View({
  center: center,
  zoom: 6
});

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  target: 'map',
  layers: [layer],
  view: view
});

工作副本

推荐阅读