无法让我的 openlayers 地图显示在网页上
Can't get my openlayers map to appear on a web page
我已经在jsfiddle中制作了一个开放图层地图，我想把它托管在我的域上。 这是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;
}
你有这个火虫
TypeError: closer is null
closer.onclick = function() {
将 js 放在 Document ready 函数中。
$( 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就会被执行。
相关文章：
- 在 Angular 应用程序的弹出窗口中显示网页
- Javascript:从网页中获取文本，更改它，然后再次显示网页
- 如何显示网页中使用的超链接列表
- 提取并使用javascript / greasemonkey显示网页
- 使用 iframe 显示网页的一部分
- 如何在显示网页时调用脚本 jquery
- 如何防止双击使用 JavaScript 突出显示网页文本
- 使用 Apache 模块和 Javascript/jQuery 显示网页的最后修改日期
- 显示网页时使用了两个或多个 CSS 样式
- 如何使用phonegap显示网页
- 突出显示网页上的文本
- 不同的操作系统对显示网页的影响有多大
- 设置进度条动画以显示网页的进度
- 如何使用.js文件使用document.write(）显示网页
- IE8中的问题，使用引导程序显示网页
- 是否可以从我的Chrome扩展在窗口中显示网页，只使用JS、HTML和CSS
- jQuery:只在document.ready后显示网页
- 自动计数和显示网页上的单词数
- 在IOS和Windows上显示网页图像的方法
- 如何从url在html页面中显示网页
