無法將我的openlayers地圖顯示在網頁上

Question

我已經在jsfiddle中制作了一個openlayers地圖，我想將其托管在我的域中。 這是jsfiddle 。 我將html，js和css復制到了我的域，並且應該在此處可見。

如您所見，它沒有按預期工作。 對於使用jsfiddle和實際托管它之間需要更改的內容，我感到困惑，因為我感覺到一些捷徑尚不清楚。

這是用於每個代碼的代碼（我已經對其進行了一些修改，以嘗試使其在常規域而不是jsfiddle上工作）（我還應注意，html，js和css都存儲在與main.html，map.js和style_1.css）：

HTML：

<title>Popup</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.js"></script>

<script src="map.js"></script>
<link rel="stylesheet" href="style_1.css" type="text/css">

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

  <div id="popup" class="ol-popup">

    <a href="#" id="popup-closer" class="ol-popup-closer"></a>

    <header>
      <img src="" alt="header-img" id="ol-popup-header-img">
      <h2 id="ol-popup-title-text">Popup Title</h2>
    </header>

    <section>
      <div class="row">
        <div class="col-xs-6">
          <table id="popup-content-table">
            <thead>
              <tr>
                <th>Attribute</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Attribute 1</td>
                <td>Value 1</td>
              </tr>
              <tr>
                <td>Attribute 2</td>
                <td>Value 2</td>
              </tr>
              <tr>
                <td>Attribute 4</td>
                <td>Value 4</td>
              </tr>
              <tr>
                <td>Attribute 5</td>
                <td>Value 5</td>
              </tr>
              <tr>
                <td>Attribute 6</td>
                <td>Value 6</td>
              </tr>
              <tr>
                <td>Attribute 7</td>
                <td>Value 7</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-xs-6">
          <div id="popup-content-description"></div>
        </div>
      </div>
    </section>

    <footer>
      <p id="ol-popup-footer-text">some more text</p>
      <img src="" alt="footer-img" id="ol-popup-footer-img">
    </footer>

  </div>
</body>

JS：

/**
 * Elements that make up the popup.
 */
var container = document.getElementById('popup');
var content = document.getElementById('popup-content-description');
var closer = document.getElementById('popup-closer');


/**
 * Create an overlay to anchor the popup to the map.
 */
var overlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
}));


/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};


/**
 * Create the map.
 */
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'Ajcgz_4tZ9Erlpa9a76T_xE-gUBsxbI-YqvcIP-L9pje_QEM9koyLnXDyDYBchb4',
        imagerySet: 'Aerial'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});


/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
    coordinate, 'EPSG:3857', 'EPSG:4326'));

  content.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur dictum tellus eu fermentum. Vestibulum eget rhoncus lacus, nec commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et leo vitae nisi ultricies commodo in id ligula. Donec euismod sollicitudin nisl, a suscipit nulla imperdiet vel. Vivamus feugiat, ex id tempus aliquam, tellus dui porttitor felis, nec malesuada tortor neque ultricies elit. In auctor, lorem id placerat luctus, dolor nibh pretium dui, tincidunt bibendum arcu tellus placerat lectus. Nullam id massa gravida, lacinia est sed, porta tortor. Nunc lacinia sit amet justo a feugiat. Integer libero nulla, gravida in dolor eu, pharetra iaculis neque. In pellentesque molestie turpis, eget cursus augue pulvinar vitae. Curabitur porttitor porta consectetur. Donec convallis fringilla augue a faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. ';
  overlay.setPosition(coordinate);
});

CSS：

.map {
  width: 800px;
  height: 600px;
}

.ol-popup {
  position: absolute;
  background: linear-gradient(rgb(255, 155, 38), white, white, white);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 5px 5px 5px 5px;
  border-radius: 20px;
  border: 5px solid rgb(255, 155, 38);
  bottom: 12px;
  left: -50px;
  width: 600px;
  height: 325px;
  font-size: x-small;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "?";
}

header {
  border-bottom: 3px solid rgb(215, 25, 35);
  height: 75px;
  overflow: auto;
}

#ol-popup-header-img {
  float: left;
  width: 60px;
  height: 60px;
  margin: 5px;
}

#ol-popup-title-text {
  float: left;
  margin: 15px 0px 15px 5px;
  text-overflow: ellipsis;
  overflow: hidden;
}

section {
  padding: 10px
}

table {
  border: 2px solid white;
  width: 100%;
}

table th {
  background-color: rgb(215, 15, 35);
  border: 2px solid white;
  color: white;
  width: 50%;
  padding: 3px;
  text-align: left;
}

table td {
  background-color: rgb(255, 155, 38);
  border: 2px solid white;
  color: white;
  width: 50%;
  padding: 3px;
  text-align: left;
}

#popup-content-table: {
  border: 1px solid black;
  height: 150px;
  text-overflow: clip;
  overflow-y: scroll;
}

#popup-content-description {
  float: right;
  height: 150px;
  text-overflow: clip;
  overflow-y: scroll;
}

footer {
  border-top: 3px solid rgb(215, 25, 35);
  height: 200px;
  overflow: auto;
}

#ol-popup-footer-text {
  float: left;
  margin: 5px;
}

#ol-popup-footer-img {
  float: right;
  margin: 5px;
}

.ol .ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

Answer 1

你有這個螢火蟲

TypeError: closer is null


closer.onclick = function() {

將您的js放入文檔就緒函數中。 對於jQuery

$( document ).ready(function() { //place your js here var container = document.getElementById('popup'); var content = document.getElementById('popup-content-description'); var closer = document.getElementById('popup-closer'); ............................... });

在jsfiddle中，一旦渲染了html，就會執行js。

無法將我的openlayers地圖顯示在網頁上

問題描述

1 個解決方案

解決方案1
1 2016-03-06 23:36:59

無法將我的openlayers地圖顯示在網頁上

問題描述

1 個解決方案

解決方案1 1 2016-03-06 23:36:59

解決方案1
1 2016-03-06 23:36:59