我一直在研究这个问题,似乎无法在最新的openlayers(编写本文时的第3版)的文档中找到信息......
我实际上是在拉我的头发!
我需要知道的是如何在地图上的特定位置放置一个特征(ol.feature)。
我已经使用函数服务器端抽象了经度和纬度,并使用模板标签将它们传递给js代码。
目前它正把它放在非洲海岸的海洋中间......
到目前为止我的代码是;
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<style>
.map {
height: 500px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>
<title>pickup point selection</title>
</head>
<body>
<h2>Choose your pickup point</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ]);
var iconFeature = new ol.Feature({
geometry: customerCoordinates,
name: '{{postcode}}'
});
iconFeature.
var iconStyle = new ol.style.Style({
text: new ol.style.Text({
text: '\uf015',
font: 'normal 50px FontAwesome',
textBaseline: 'Bottom',
fill: new ol.style.Fill({
color: 'black',
})
})
});
iconFeature.setStyle(iconStyle);
iconFeature.setG
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]),
zoom: 17
})
});
</script>
</body>
</html>
非常感谢任何帮助
如果您需要更多信息,请告诉我们!
答案 0 :(得分:1)
改变这个:
var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ])
var customerCoordinates = new ol.geom.Point([ ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]) ])