0
Ich hoffe, dass Sie alle einen schönen Tag haben. Ich komme hier mit einer Frage ich habe ein Formular, mit einem Dropdown-Menü mit der Liste der Standorte des Unternehmens. Und unten ist meine Google Maps API funktioniert. Ich bekomme alle Daten von einem zuvor empfangenen JSON von meiner API. Ich versuche gerade, das zu machen, wenn ich auf den Kartenmarker klicke, ändert sich der Wert in der Dropdown-Liste AGENCIA. Hier ist das Beispiel des Formulars.Ändern Dropdown-Wert nach Google Maps API-Marker klicken
Und hier ist der Code, im fast, aber ich dont get it ... Recht auf Arbeit jetzt habe ich eine Warnung, wenn ich auf der Markierung klicken, um zu sehen, ob es den Wert korrekt ist, aber wenn Ich klicke darauf, das Dropdown-Menü wird leer.
<?php
//Habilitar las sesiones
$codigoError ="";
session_start();
//Validar si existen las sesiones
if(!isset($_SESSION['vsJsonAgencias']))
{
header("location:../index.php");
}
//if(!empty($_SESSION['codigoError'])){
$codigoError = $_SESSION['codigoError'];
//}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="SGLabz">
<title>CitasWeb</title>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/portfolio-item.css" rel="stylesheet">
<link rel="stylesheet" href="../css/form-basic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script src="../js/form.js"></script>
<link href="../css/pikaday.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- date new-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body >
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><?php echo '<img alt="LOGO" height="40" width="40" src="http://'.$_SESSION['vsApache'].'/citasweb/icon.png"" >';?>CitasWeb</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Row -->
<form class="form-basic" id="form-basic" <?php echo 'action="http://'.$_SESSION['vsApache'].'/citasweb/gestAgenciafunc.php"';?> method="post">
<div class="form-title-row">
<h1>Seleccionar</h1>
</div>
<div class="form-row">
<label>
<span>Gestión</span>
<?php
echo '<select name="codgestion">';
$jsonData =$_SESSION['vsJsonAgencias'];
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->TipoGestion as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
}
echo '</select>';
?>
</label>
</div>
<div class="form-row">
<label>
<span>Fecha</span>
<input input type="text" id="datepicker" name="fecha" required/>
</label>
</div>
<div class="form-row">
<label>
<span>Agencia</span>
<?php
echo '<select id="agencia" name="agencia">';
//$jsonData = $_SESSION['vsJsonAgencias'];
$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->Agencias as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
//CAPTURAR NOMBRE DE LA AGENCIA
$_SESSION['vsNomagencia'] = $option->Nombre;
}
echo '</select>';
?>
</label>
</div>
<body onload = "loadMap()">
<h2>Agencias</h2>
<?php
//$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
?>
<center>
<div id = "map" style = "width:480px; height:480px;"></div>
<script>
// fake JSON call
function getJSONMarkers() {
var markers = <?php echo $jsonData ?>;
return markers;
}
function loadMap() {
// Initialize Google Maps
const mapOptions = {
center:new google.maps.LatLng(13.706360,-89.212204),
zoom: 10
}
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Usted esta aquí.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Load JSON Data
const data = getJSONMarkers();
// Initialize Google Markers
for(agencia of data.Agencias) {
let marker = new google.maps.Marker({
id: agencia.ID,
map: map,
position: new google.maps.LatLng(agencia.Latitud, agencia.Longitud),
content: agencia.Nombre,
})
marker.info = new google.maps.InfoWindow({
content: agencia.Nombre
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
marker = this;
alert('ID is :'+ this.id);
$(document).ready(function(){
$("#agencia").val(this.id);
});
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD-h6xw5-2X2DdSmL93dQmrR7p63Q_uv5w"></script>
</body></center>
<div class="form-row">
<button type="submit" >Consultar Horarios</button>
</div>
<center>
<?php
//print_r($_SESSION['codigoError']);
print_r($codigoError);
?>
<br>
</center><br/>
<?php echo '<a href="http://'.$_SESSION['vsApache'].'/citasweb/php/menu.php"><img alt="SALIR" height="42" src="http://'.$_SESSION['vsApache'].'/citasweb/php/regresar.png"" width="142"></a>';?>
</form>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<?php echo '<center><img alt="SALIR" height="50" width="170" src="http://'.$_SESSION['vsApache'].'/citasweb/conticsa.png"" ></center><br/>';?>
<p class="m-0 text-center text-white">Copyright © Citas Web 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/pikaday.js"></script>
<script src="../js/moment.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
$.datepicker.regional['es'] = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
monthNamesShort: [ "ene","feb","mar","abr","may","jun",
"jul","ago","sep","oct","nov","dic" ],
dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
dayNamesMin: [ "D","L","M","M","J","V","S" ],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
$.datepicker.setDefaults($.datepicker.regional['es']);
});
</script>
</body>
</html>
Vielen Dank im Voraus ..
können Sie ein Probe json Daten zur Verfügung stellen? – rafon
Ich werde den Beitrag mit einem JSON im Web bearbeiten api myjson jetzt –
sollte es mit der JSON API von diesem Link> https://api.myjson.com/bins/t222l arbeiten –