Google Maps -overlays
Google Maps - Overlays
Overlays zijn objecten op de kaart die zijn gekoppeld aan breedte-/lengtecoördinaten.
Google Maps heeft verschillende soorten overlays:
- Marker - Enkele locaties op een kaart. Markeringen kunnen ook aangepaste pictogramafbeeldingen weergeven
- Polylijn - Reeks rechte lijnen op een kaart
- Polygoon - Reeks rechte lijnen op een kaart, en de vorm is "gesloten"
- Cirkel en rechthoek
- Infovensters - Toont inhoud in een pop-upballon bovenop een kaart
- Aangepaste overlays
Google Maps - Een markering toevoegen
De constructor Marker maakt een markering. Houd er rekening mee dat de positie-eigenschap moet worden ingesteld om de markering weer te geven.
Voeg de markering toe aan de kaart met behulp van de setMap()-methode:
Voorbeeld
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Animeer de markering
In het onderstaande voorbeeld ziet u hoe u de markering kunt animeren met de eigenschap Animation:
Voorbeeld
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Pictogram in plaats van markering
In het onderstaande voorbeeld wordt een afbeelding (pictogram) gespecificeerd die moet worden gebruikt in plaats van de standaardmarkering:
Voorbeeld
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polylijn
Een polylijn is een lijn die in een geordende volgorde door een reeks coördinaten wordt getrokken.
Een polylijn ondersteunt de volgende eigenschappen:
- pad - specificeert verschillende breedte-/lengtecoördinaten voor de lijn
- strokeColor - specificeert een hexadecimale kleur voor de lijn (formaat: "#FFFFFF")
- strokeOpacity - specificeert de dekking van de lijn (een waarde tussen 0.0 en 1.0)
- strokeWeight - specificeert het gewicht van de lijn van de lijn in pixels
- bewerkbaar - bepaalt of de regel door gebruikers kan worden bewerkt (waar/onwaar)
Voorbeeld
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Veelhoek
Een polygoon is vergelijkbaar met een polylijn omdat het bestaat uit een reeks coördinaten in een geordende reeks. Polygonen zijn echter ontworpen om gebieden binnen een gesloten lus te definiëren.
Veelhoeken zijn gemaakt van rechte lijnen en de vorm is "gesloten" (alle lijnen sluiten op elkaar aan).
Een polygoon ondersteunt de volgende eigenschappen:
- pad - specificeert verschillende LatLng-coördinaten voor de lijn (eerste en laatste coördinaat zijn gelijk)
- strokeColor - specificeert een hexadecimale kleur voor de lijn (formaat: "#FFFFFF")
- strokeOpacity - specificeert de dekking van de lijn (een waarde tussen 0.0 en 1.0)
- strokeWeight - specificeert het gewicht van de lijn van de lijn in pixels
- fillColor - specificeert een hexadecimale kleur voor het gebied binnen het omsloten gebied (formaat: "#FFFFFF")
- fillOpacity - specificeert de dekking van de vulkleur (een waarde tussen 0,0 en 1,0)
- bewerkbaar - bepaalt of de regel door gebruikers kan worden bewerkt (waar/onwaar)
Voorbeeld
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Cirkel
Een cirkel ondersteunt de volgende eigenschappen:
- center - specificeert de google.maps.LatLng van het middelpunt van de cirkel
- straal - specificeert de straal van de cirkel, in meters
- strokeColor - specificeert een hexadecimale kleur voor de lijn rond de cirkel (formaat: "#FFFFFF")
- strokeOpacity - specificeert de dekking van de streekkleur (een waarde tussen 0.0 en 1.0)
- strokeWeight - specificeert het gewicht van de lijn van de lijn in pixels
- fillColor - specificeert een hexadecimale kleur voor het gebied binnen de cirkel (formaat: "#FFFFFF")
- fillOpacity - specificeert de dekking van de vulkleur (een waarde tussen 0,0 en 1,0)
- bewerkbaar - bepaalt of de cirkel door gebruikers kan worden bewerkt (waar/onwaar)
Voorbeeld
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - InfoVenster
Toon een InfoWindow met wat tekstinhoud voor een markering:
Voorbeeld
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);