Hinzufügen von Markern mit OpenLayers 3

Question

Ich möchte einen einfachen Marker an beliebiger Länge und Breite (Ort) hinzufügen. Ich habe es viel gegoogelt, aber von dort keine vernünftige Antwort oder Hilfe gefunden. Irgendein Code, den ich versucht habe, aber sie funktionierten nicht gut für mich. Ich bin nicht gut darin, den bestehenden Code zu programmieren und zu lesen.

Bitte gehen Sie hier http://openlayers.org/en/latest/examples/icon.html und sehen, das ist ein gutes Beispiel und zeigt das Symbol, aber dahinter gibt es ein Bild keine Karte. Ich habe versucht, dort eine Karte zu zeigen und Marker mit Längen- und Breitengrad zu zeigen, aber es funktioniert nicht von meinem Ende.

Ich möchte nur eine einfache Karte mit Marker an einem bestimmten Ort zeigen. Beim Anklicken sollte das Popup geöffnet werden und Informationen über diesen Ort enthalten.

Zum Beispiel: Dies ist ein xyz Restaurant, xyz Hotel, xyz Tempel usw.

Answer 1

, wenn Sie einen benutzerdefinierten Inhalt in Ihrem Popup angezeigt wird, wenn auf dem Marker klicken:

$(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': "this is a "+feature.get('type')+" in location : "+feature.getGeometry().getCoordinates().toString() 
     }); 

wenn das Beispiel in dem Link, den Sie isn geteilt Wenn Sie nicht für Sie arbeiten, können Sie die Fehler anzeigen, die in der Konsole zurückgegeben werden

Answer 2

Die Hintergrundkarte in dem Beispiel, das Sie verknüpften, sollte wie ein Bild aussehen. Es wird mit dem folgenden Code gezogen:

var rasterLayer = new ol.layer.Tile({ 
    source: new ol.source.TileJSON({ 
     url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', 
     crossOrigin: '' 
    }) 
    }); 

Wenn Sie eine andere Karte möchten, können Sie die Fliesenleger Quelle mit einem der verfügbaren Quellen in Openlayers, oder mit Ihrem eigenen ersetzen. Vielleicht wäre OpenStreetMap eine Option? Ersetzen Sie einfach das obige Snippet mit dem folgenden:

var rasterLayer = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
    }); 

Der Code, der das Popup und setzt seinen Inhalt in diesem Beispiel positioniert ist

 var coordinates = feature.getGeometry().getCoordinates(); 
     popup.setPosition(coordinates); 
     $(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': feature.get('name') 
     }); 

Um auch Breiten- und Längen anzuzeigen, dass Code zu

ändern

 var coordinates = feature.getGeometry().getCoordinates(); 
     popup.setPosition(coordinates); 
     $(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': feature.get('name') + ' ' + ol.coordinate.toStringHDMS(coordinates, 1) 
     });