我已经在jsfiddle中制作了一个openlayers地图,我想将其托管在我的域中。 This is the jsfiddle。我将html,js和css复制到了我的域,它应该可见here

如您所见,它没有按预期工作。我对在使用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;
}

最佳答案

你有这个萤火虫

TypeError: closer is null


closer.onclick = function() {


将您的js放入文档就绪函数中。对于jQuery

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

在jsfiddle中,一旦渲染了html,就会执行js。

10-05 21:07
查看更多