如何在特定位置经纬度上添加标记作为输入字段?

Question

我正在尝试根据html输入字段经度和纬度在位置上添加标记。提供输入并单击调用函数goToLocation的搜索按钮后，结果应在该位置上显示标记，但是执行此功能后，只有位置缩放，但没有标记可见。我使用的是开放层 4.5 版本，这是我带有该函数的代码：

function goToLocation() {
vectorSource.clear();
var f = "{ "type": "Feature","geometry": { "type": "Point", "coordinates": [" + $('#input-longitude').val() + "," + $('#input-latitude').val() + "]}}";
//  var f2 = "{ "type": "Feature","geometry": { "type": "Point", "coordinates": [" + $('#input-longitude').val() + "," + $('#input-latitude').val() + "]}}";
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'img/marker.png'
}))
});

var myFeature = (new ol.format.GeoJSON()).readFeature(f);
myFeature.setStyle(iconStyle);
vectorSource.addFeature(myFeature);
map.getView().fit(vectorSource.getExtent(), map.getSize());
map.getView().fit(vectorSource.getExtent(), map.getSize());
map.getView().setZoom(12);
}

Answer 1

OL 对输入类型是敏感的。有时您可以使用字符串作为坐标，有时不能，它必须是浮点数。

解决方案是解析坐标

parseFloat($('#input-longitude').val())

还要确保用户使用.来分隔小数，而不是,

PS：话虽如此，您不需要构建GeoJson并再次重新解析它。

myVectorSource.addFeature( 
new Feature( {geometry: new Point([parseFloat($('#input-longitude').text()),  
parseFloat($('#input-longitude').text())]),
name: String($('#input-myname').text()),
}));