创建OpenLayer圈时出现问题

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"><script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

.map {
  width: 100%;
  height: 100%;
}

<div id="map" class="map"></div>

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});