x

Karte mit Sprechblase

Geschrieben von lord_icon (Gast) am 20. Juli 2014 11:39:05: [flux]

Hi,

ich will auf meiner Homepage einfach nur eine einfach Karte anzeigen.
Sie soll im eigentlichen nur anzeigen, wo ich genau wohnhaft bin.

In den Dokus hab ich den Code hier gefunden:

<html><body>
<div␣id="mapdiv"></div>
<script␣src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map␣=␣new␣OpenLayers.Map("mapdiv");
map.addLayer(new␣OpenLayers.Layer.OSM());

var␣lonLat␣=␣new␣OpenLayers.LonLat(␣XX,YY␣)
.transform(
new␣OpenLayers.Projection("EPSG:4326"),␣//␣Transformation␣aus␣dem␣Koordinatensystem␣WGS␣1984
map.getProjectionObject()␣//␣in␣das␣Koordinatensystem␣'Spherical␣Mercator␣Projection'
);

var␣zoom=16;

var␣markers␣=␣new␣OpenLayers.Layer.Markers(␣"Markers"␣);
map.addLayer(markers);

markers.addMarker(new␣OpenLayers.Marker(lonLat));

map.setCenter␣(lonLat,␣zoom);

</script>
</body></html>

(YY:XX sind natürlich wirkliche Kordies)

Das klappt soweit hervoragend und ist auch einfach zu bedingen.
Meine Adresse wird mittels marker auch entsprechend markiert.

2 Wünsche hätte ich aber noch:

  • Es geht wohl auch als marker auch ein anderers Symboö (die rote Stecknadel wäre gut)
  • Es gehen wohl auch Sprechblasen.

Letzteres habe ich wohl schon passendes gefunden:

␣␣␣␣//␣We␣add␣the␣marker␣with␣a␣tooltip␣text␣to␣the␣overlay
overlay.addFeatures([
new␣OpenLayers.Feature.Vector(myLocation,␣{tooltip:␣'OpenLayers'})
]);

//␣A␣popup␣with␣some␣information␣about␣our␣location
var␣popup␣=␣new␣OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(),␣null,
'<a␣target="_blank"␣href="http://openlayers.org/">We</a>␣'␣+
'could␣be␣here.<br>Or␣elsewhere.',␣null,
true␣//␣<--␣true␣if␣we␣want␣a␣close␣(X)␣button,␣false␣otherwise
);

nur einfach in den JS Code reinpacken ist hier leider nicht.
Denn dann wird die Karte nicht mehr geladen.

Ich will aber ungern, das ganze Projekt runterladen und da gleich x Datei einbinden nur um n Hinweistext auszugeben.

Entweder ist die Doku hierrüber sehr dürftig.. oder ich finde hierzu nicht's... oder ich hab falsch gesucht.

Weiß einer Rat, wie ich den oben genannten Code erweitern könnte ?
Soll wie ja gesagt, das einfachste vom einfachsten sein.

Antworten: