无法将我的openlayers地图显示在网页上

Question

I have made an openlayers map in jsfiddle and I want to get it hosted on my domain. 我已经在jsfiddle中制作了一个openlayers地图，我想将其托管在我的域中。 This is the jsfiddle . 这是jsfiddle 。 I copied over the html, js and css to my domain and it should be visible here . 我将html，js和css复制到了我的域，并且应该在此处可见。

As you can see, it is not working as intended. 如您所见，它没有按预期工作。 I am confused as to what I need to change in between using jsfiddle and actually hosting it, as I feel there are shortcuts being done that I am not aware of. 对于使用jsfiddle和实际托管它之间需要更改的内容，我感到困惑，因为我感觉到一些捷径尚不清楚。

This is the code being used for each (I have modified it already a bit to try to make it work on a regular domain instead of jsfiddle) (I should also note that the html, js and css are all stored in the same folder as main.html, map.js and style_1.css): 这是用于每个代码的代码（我已经对其进行了一些修改，以尝试使其在常规域而不是jsfiddle上工作）（我还应注意，html，js和css都存储在与main.html，map.js和style_1.css）：

HTML: 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: 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: 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

you have this firebug 你有这个萤火虫

TypeError: closer is null


closer.onclick = function() {

put your js within a document ready function. 将您的js放入文档就绪函数中。 for jquery 对于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'); ............................... });

in jsfiddle js is executed once html has been rendered. 在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