Как добавить маркер для указанной c долготы и широты местоположения в качестве поля ввода? - PullRequest
Новая
       52

Как добавить маркер для указанной c долготы и широты местоположения в качестве поля ввода?

0 голосов
/ 17 июня 2020

Я пытаюсь добавить маркер для местоположения на основе 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);
}

1 Ответ

0 голосов
/ 17 июня 2020

OL зависит от типа ввода. Иногда вы можете использовать строку для координат, а иногда нет, это должно быть число с плавающей запятой.

Решение состоит в том, чтобы проанализировать координаты 

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

Также убедитесь, что пользователь использовал . для разделения десятичных знаков, а не ,

PS : при этом вам не нужно создавать Geo Json и заново анализировать его. 

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