0
我在jsfiddle中製作了openlayers地圖，我想讓它在我的域中託管。 This is the jsfiddle。我複製了html，js和css到我的域，它應該是可見的here。無法讓我的openlayers地圖出現在網頁上
正如你所看到的，它不能按預期工作。我很困惑，我需要改變之間使用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;
}