Stap 7: Gebruik de Google-API voor het maken van een kaart
Voor een heleboel redenen die u zou willen hebben van een kaart in uw app, biedt Google een API om dit gemakkelijk te doen.
Eerst moeten we de API opnemen in de index.html, wij dit de zelfde manier wij onze eigen js-bestanden opgenomen.
Vervolgens voegt u een nieuwe sjabloon map.html. In deze nieuwe HTML-bestand maken we een weergave met de naam navigatie en in deze weergave maken we een veld met aangepaste klasse kaart. Dit is het doek waarop de google kaart zullen worden gebracht. In onze css-bestand creëren we een regel #map overeenkomt met de klasse wij enkel gebruikt en de grootte ingesteld op 100%, zal deze manier de kaart nemen alle mogelijke ruimte.
Het moeilijkste deel van het maken van de kaart is de controller. We meestal de domeincontrollers in een apart bestand zetten, dus maak een bestand genaamd controllers.js in de js-kaart. De eerste regel in dit bestand gedeclareerd als een Angular js-module met naam controllers in het kader van de ' Mijntoep '. Vervolgens is er de controller NavCtrl, die zich met de kaart bezighouden zal. We definiëren een functie intitialize, die zal de kaart initialiseren en het schilderen op het doek. Geolocation wordt gebruikt om uw huidige positition. De kaart wordt vervolgens gemaakt met behulp van uw positie en zoomfactor 10. Om een marker op waar je nu bent, definiëren we een nieuwe markeerdraad-object, met een positie, een kaart om te worden gebruikt en een naam.
Aan het einde van onze controller de lijn
ionic.Platform.ready(initialize)
wacht totdat Ionic is klaar het lezen van het bestand en vervolgens oproepen functie initialiseren. Dit is veiliger dan gewoon bellen initialiseren. omdat dan de app misschien of misschien niet doen het goed. Deze regel wordt uitgevoerd wanneer de controller is gemaakt. Maar we niet gebruiken het nog, dus laten we deze koppelen aan de pagina map.html.
Daarvoor maken we een nieuwe staat in app.js, wiens mening wij de pagina van de map.html en de controller laden: NavCtrl.
Nu die rust alles wil onze navigatie in de zijbalk op deze status. We doen dit door het kenmerk van een ui-sref toe te voegen aan de link in kant-menu.html. SREF staat voor staat referentie, dus in plaats van verwijzen naar een url, en hebben om het te veranderen als u later wilt wijzigen van de url, u gewoon gebruik maken de staat.