点击Google Maps Api标记后更改下拉列表值

时间：2017-10-04 04:40:45

标签： javascript jquery google-maps google-maps-api-3

我希望你们所有人都过得愉快。 我带着一个问题来到这里，我有一个表格，下拉菜单中有公司的位置列表。 以下是我的谷歌地图api工作。我从之前从api收到的json中获取了所有数据。 我目前正试图在点击地图标记时更改下拉列表AGENCIA中的值。 下面是表格的例子。

Form

这里是代码，我几乎在那里，但我没有让它工作...现在我发出警报，当我点击标记，看看它是否正确，但当我点击它的下拉菜单变空了。

<?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 &copy; 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: "&#x3C;Ant",
    nextText: "Sig&#x3E;",
    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>

提前致谢..

1 个答案:

答案 0 :(得分：1)

问题是使用$（文件）.ready - 这不是必需的：

  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);
         //----});
     });
相关问题
最新问题