个人中心
gpt4 book ai didi

javascript - 无法让我的 openlayers map 出现在网页上

转载 作者：太空宇宙 更新时间：2023-11-04 10:40:43 25 4
gpt4 key购买 nike

我在 jsfiddle 中制作了一个 openlayers map ，我想将其托管在我的域中。 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;
}

最佳答案

你有这个 Firebug 

TypeError: closer is null


closer.onclick = function() {

将您的 js 放在文档就绪函数中。对于 jquery

$(文档).ready(函数(){
//把你的js放在这里
var container = document.getElementById('popup');
var content = document.getElementById('popup-content-description');
var closer = document.getElementById('popup-closer');
...................................
});

在 jsfiddle 中，一旦 html 被渲染，js 就会被执行。

关于javascript - 无法让我的 openlayers map 出现在网页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35832710/

25 4 0
文章推荐： linux - Linux 上的 RAM 访问
文章推荐： html - 如何防止悬停期间的链接填充扩展段落填充
文章推荐： linux - 在 LAMP 堆栈中重命名本地主机 127.0.0.1
文章推荐： javascript - 将 CSS 转换为不同的格式 (JavaScript/jQuery)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com