Everything seems to be working good until I select from the list of names. The map isn't centering on the proper coordinates. I'm using Jquery UI and and openlayers 3. here's my code:
$(function () { function log(message) { $("<div/>").text(message).prependTo("#log"); $("#log").scrollTop(0); } var centerCoords; $("#city").autocomplete({ source: function (request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON?username=spifftek", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, beforeSend: function () { $('.input-group-addon').html(""); }, success: function (data) { response($.map(data.geonames, function (item) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode, value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode, lat: item.lat, lng: item.lng }; })); $('.input-group-addon').html(""); } }); }, minLength: 2, select: function (event, ui) { log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); var location = ol.proj.transform([ui.item.lng, ui.item.lat], 'EPSG:4326', 'EPSG:3857'); console.log(location); var a = map.getView(); a.setCenter(location); a.setZoom(14); var marker = new ol.Feature({ geometry: new ol.geom.Point(location) }); var vectorSource3 = new ol.source.Vector({ features: [marker] }); vectorSource3.addFeature(marker); var vectorlayer3 = new ol.layer.Vector({ source: vectorSource3 }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], opacity: 0.75, scale: 0.10, anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: "../images/flag.png" }) }); marker.setStyle(iconStyle); map.addLayer(vectorlayer3); }, open: function () { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); $(".ui-autocomplete").css("z-index", 1000); }, close: function () { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); } });});Thanks in advance!
أكثر...
$(function () { function log(message) { $("<div/>").text(message).prependTo("#log"); $("#log").scrollTop(0); } var centerCoords; $("#city").autocomplete({ source: function (request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON?username=spifftek", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, beforeSend: function () { $('.input-group-addon').html(""); }, success: function (data) { response($.map(data.geonames, function (item) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode, value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode, lat: item.lat, lng: item.lng }; })); $('.input-group-addon').html(""); } }); }, minLength: 2, select: function (event, ui) { log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); var location = ol.proj.transform([ui.item.lng, ui.item.lat], 'EPSG:4326', 'EPSG:3857'); console.log(location); var a = map.getView(); a.setCenter(location); a.setZoom(14); var marker = new ol.Feature({ geometry: new ol.geom.Point(location) }); var vectorSource3 = new ol.source.Vector({ features: [marker] }); vectorSource3.addFeature(marker); var vectorlayer3 = new ol.layer.Vector({ source: vectorSource3 }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], opacity: 0.75, scale: 0.10, anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: "../images/flag.png" }) }); marker.setStyle(iconStyle); map.addLayer(vectorlayer3); }, open: function () { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); $(".ui-autocomplete").css("z-index", 1000); }, close: function () { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); } });});Thanks in advance!
أكثر...