Estoy haciendo una app móvil con Ionic Framework y tengo una lista de lugares en una vista lugares.html
, cada ítem tiene un nombre, dirección y ubicación (coordenadas). Quiero que al seleccionar un ítem se dibuje el marcador de mi posición actual y el seleccionado. Intenté hacerlo con un href
pasando las coordenadas por parámetros a la vista de mapa, pero solo funciona la primera vez y luego no aparece el mapa. Mi duda es en la parte de "//Dibujar marker de lugar", no se si ponerlo en una función, como llamarla.. Soy nuevo en esto. si necesitan alguna otra parte de código me avisan. (Aclaro que estoy usando tabs
y el mapa es una pestaña y lugares es otra). También me gustaría saber si estoy haciendolo de la forma correcta (usando el href
). Agradezco su ayuda.
Archivo lugares.html
<ion-view view-title="Lugares">
<ion-content>
<ion-list>
<ion-item class="item-text-wrap" ng-repeat="item in lugares"
href="#/tab/mapa/{{item.latitud}}/{{item.longitud}}">
<h2>{{item.nombre}}</h2>
<h3>{{item.calle}} {{item.numero}} </h3>
<h4>{{item.latitud}}, {{item.longitud}}</h4>
</ion-item>
</ion-list>
</ion-content>
Estado del mapa
.state('tabs.mapa',{
url:'/mapa/:lat/:lng',
views:{
'mapa-tab':{
templateUrl: 'templates/mapa.html',
controller: 'ControladorMapa'
}
}
})
Controlador mapa
.controller('ControladorMapa', function($scope, $state, $cordovaGeolocation){
// Mapa con centro en mi posicion
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var centro = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: centro,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Marcador
// Esperar que se cargue el mapa
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
//Crear marker
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: centro
});
//Ventana
var infoWindow = new google.maps.InfoWindow({
content: "Estás aqui!"
});
//Evento de ventana
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
// Dibujar marker de lugar
$scope.lat = $state.params.lat;
$scope.lng = $state.params.lng;
if ($scope.lat != 0 && $scope.lng != 0) {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng($scope.lat, $scope.lng)
});
}
});
}, function(error){
console.log("No pudimos localizarte.");
});
});
$scope.lat = $state.params.lat
por$scope.lat = parseFloat($stateParams.lat)
ademas debes injectar$stateParams
. Es necesario pues los parámetros son cadenas, no números.'/mapa/:lat/:lng'
con dos parámetros latitud y longitud y no usas esos parámetros despues con$stateParams
para poner el maker en el mapa. Estas intentando poner dos markers?