我试图为数组中的要素添加一些坐标，但它们出现在错误的位置。出于某些奇怪的原因，当我尝试对坐标进行硬编码时，功能会出现在正确的位置。我通过console.log检查了从数组中得到的值，它们是正确的！
var places = [{
description: "FIRST",
icon: "images/staro.png",
points: [{
name: "A",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "19.535807,50.064800"
}, {
name: "B",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "21.2562269,50.9707909"
}, {
name: "C",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "20.535807,50.064800"
}, {
name: "D",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "21.053,50.8591"
}, {
name: "E",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "21.2562269,50.3707909"
}, {
name: "F",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "21.2562269,50.6707909"
}, {
name: "G",
typ: "LOREM IPSUM DOLOR",
description: "test",
position: "20.2562269,50.7707909"
}]
}];
var map;
var vectorSource;
var vectorLayer;
var rasterLayer;
var oldprojection;
function myFunction() {
var point;
for (var x = 0, xl = places.length; x < xl; x++) {
var place = places[x];
// sort all points by name
place.points.sort(function(p1, p2) {
return alphaSort(p1.name, p2.name);
});
for (var y = 0, yl = place.points.length; y < yl; y++) {
var point = place.points[y];
var latlng = point.position.split(",");
//console.log(latlng[0]+" "+latlng[1])
getFeature(latlng[0], latlng[1]);
}
}
alert("boom");
//getFeature(19.1316683,52.107985 );
//getFeature(29.1316683,52.107985 );
//getFeature(49.1316683,52.107985 );
//getFeature(99.1316683,52.107985 );
//getFeature(89.1316683,52.107985 );
//getFeature(79.1316683,52.107985 );
}
alphaSort = function(a, b) {
var chars = "AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻaąbcćdeęfghijklłmnńoópqrsśtuvwxyzźż",
pos = 0,
min = Math.min(a.length, b.length);
while (a.charAt(pos) === b.charAt(pos) && pos < min) {
pos++;
}
return chars.indexOf(a.charAt(pos)) > chars.indexOf(b.charAt(pos)) ? 1 : -1;
};
function getFeature(lat, lng) {
features = [];
var iconFeature = new ol.Feature({
//geometry: new ol.geom.Point(ol.proj.transform([lat ,lng], 'EPSG:4326', 'EPSG:3857')),
//
//geometry: new ol.geom.Point(ol.proj.transform([lat ,lng], 'EPSG:4326', 'EPSG:3857')),
//geometry: new ol.geom.Point(ol.proj.transform([lat ,lng], 'EPSG:4326', 'EPSG:3857')),
geometry: new ol.geom.Point(ol.proj.transform([lat, lng], 'EPSG:4326', 'EPSG:3857')),
name: 'Null Island',
LAT: lat,
LNG: lng,
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.1.1/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
features.push(iconFeature);
vectorSource.addFeatures(features);
return features;
}
function registerClickListener() {
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50],
delay: {
show: "1500",
hide: "5"
},
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
$(element).popover('destroy');
// delay to prevent the popup bug
var delayMillis = 300; //1 second
setTimeout(function() {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name') + " " + feature.get('LAT') + " " + feature.get('LNG')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
}, delayMillis);
});
// change mouse cursor when over marker
map.on('pointermove', function(e) {
if (e.dragging) {
$(element).popover('destroy');
return;
}
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
}
function initMap() {
// view
vectorSource = new ol.source.Vector({
//projection: 'EPSG:4326'
});
// source
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// raster layer
rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM(),
});
// map
map = new ol.Map({
layers: [rasterLayer, vectorLayer],
//interactions : ol.interaction.defaults({doubleClickZoom :false}),
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([19.1316683, 52.1079857], 'EPSG:4326', 'EPSG:3857'),
//center: [19.1316683 ,52.1079857],
zoom: 6
})
});
registerClickListener();
}
$(document).ready(initMap);<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/walkermatt/ol3-popup/master/src/ol3-popup.css" />
<style>
html,
body,
#map {
height: 100%;
margin: 0px;
padding: 0px;
}
#map {
position: relative;
}
</style>
<script src="js/points.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<button onclick="myFunction()">Click to add features to the map</button>
<br>
<br>
<div id="map" class="map">
<div id="popup"></div>
</div>
</body>
</html>
答案 0 :(得分：0)
我必须将数组中的值解析为float..stupid me
parseFloat(latlng[0]),parseFloat(latlng[1])