Google Maps kerros

Google Maps - Päällyste

Päällyste on kartalla sidottu leveys- ja pituusasteisiin liitetty objekti.

Google Mapsilla on useita päällystystyyppejä:

• Merkki (Marker) - Yksittäinen sijainti kartalla. Merkki voi myös näyttää mukautetun ikonin kuvan
• Viivakäyrä (Polyline) - Sarja suoria linjoja kartalla
• Monikulmio (Polygon) - Sarja suoria linjoja kartalla, muoto on 'suljettu'
• Ympyrät ja suorakulmiot (Circle ja Rectangle)
• Tiedotikkuna (Info Windows) - Näytä sisältö kartan yläpuoleisessa ponnahduslaskussa
• Mukautetut päällystykset (Custom overlays)

Google Maps - Lisää merkki

Marker-rakentaja voi luoda merkinnän. Huomaa, että merkinnän näyttämiseksi on asetettava position-ominaisuus.

Lisää merkki karttaan käyttämällä setMap() -metodia:

esimerkki

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - Merkinnän animointi

Seuraavassa esimerkissä näytetään, miten animation-ominaisuutta käytetään merkinnän animoinnissa:

esimerkki

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Vaihda merkki ikoniksi

Seuraavassa esimerkissä määritetään käytettävä kuva (ikoni) oletusmerkinnän sijaan:

esimerkki

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - Viivakäyrä

Viivakäyrä on viiva, joka on piirretty sarjalla järjestettyjä koordinoita.

Viivakäyrä tukee seuraavia ominaisuuksia:

• path - Määritetään linjan muutamat leveys- ja pituusasteet
• strokeColor - Määritä viivan heksadesimaaliväri (muoto: "#FFFFFF")
• strokeOpacity - Määritä viivan läpinäkyvyys (0.0 - 1.0 välillä oleva arvo)
• strokeWeight - Määritä viivan paksuus pikseleissä
• editable - Määritä, voidaanko tätä viivaa muokata käyttäjän toimesta (true/false)

esimerkki

var myTrip = [stavanger, amsterdam, london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Maps - monikulmio

Monikulmio on samanlainen kuin折线, se koostuu sarjasta järjestyksessä olevia koordinaatteja. Kuitenkin monikulmio on suunniteltu määrittämään suljetun alueen sisällä oleva alue.

Monikulmio koostuu suorista viivoista ja on "suljettu" (kaikki viivat yhdistyvät)

Monikulmion tukee seuraavia ominaisuuksia：

• path - Määritä viivan useat leveys- ja pituusasteet (ensimmäinen ja viimeinen kohta ovat samat)
• strokeColor - Määritä viivan heksadesimaaliväri (muoto: "#FFFFFF")
• strokeOpacity - Määritä viivan läpinäkyvyys (0.0 - 1.0 välillä oleva arvo)
• strokeWeight - Määritä viivan paksuus pikseleissä
• fillColor - Määritä suljetun alueen heksadesimaaliväri (muoto: "#FFFFFF")
• fillOpacity - Määritä täyttöväriä läpinäkyvyys (0.0 - 1.0 välillä oleva arvo)
• editable - Määritä, voidaanko tätä viivaa muokata käyttäjän toimesta (true/false)

esimerkki

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 - ympyrä

Ympyrä tukee seuraavia ominaisuuksia：

• center - Määritä ympyrän keskipiste google.maps.LatLng
• radius - Määritä ympyrän säde metreinä
• strokeColor - Määritä ympyrän ympärillä olevan viivan heksadesimaaliväri (muoto: "#FFFFFF")
• strokeOpacity - Määritä viivan läpinäkyvyys (0.0 - 1.0 välillä oleva arvo)
• strokeWeight - Määritä viivan paksuus pikseleissä
• fillColor - Määritä ympyrän sisäisen alueen heksadesimaaliväri (muoto: "#FFFFFF")
• fillOpacity - Määritä täyttöväriä läpinäkyvyys (0.0 - 1.0 välillä oleva arvo)
• editable - Määritä käyttäjän mahdollisuus muokata ympyrää (true/false)

esimerkki

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - tietoikkuna

näytä markerille tekstisisältöä sisältävä tietoikkuna：

esimerkki

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);