我想在我的网站上使用OpenLayers库展示OpenStreetMap。我想添加一个标记,但标记没有显示在地图上。
我在谷歌上搜索过,找到了以下代码与我的代码相似。有很多添加标记的示例,但它们主要是针对谷歌地图的。我想使用开源地图。
我期望地图上显示标记,但是我没有看到标记。
我在谷歌上搜索过,找到了以下代码与我的代码相似。有很多添加标记的示例,但它们主要是针对谷歌地图的。我想使用开源地图。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
///SHOW MAP
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
zoom: 17
})
});
///ADD MARKER
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon.clone()));
</script>
</body>
</html>
代码片段:
///SHOW MAP
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
zoom: 17
})
});
///ADD MARKER
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon.clone()));
.map {
height: 400px;
width: 100%;
}
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
<h2>My Map</h2>
<div id="map" class="map"></div>