Question

我正在开发一个需要谷歌地图的项目。以及以下场景

用户从下拉列表中选择一个值。谷歌地图应该重新加载而不会重新加载页面。

到目前为止，我已经能够在codeigniter中配置谷歌地图，而且我已经能够从下拉列表中选择值并重新加载它。但它需要页面重新加载。

如何在codeigniter中没有页面重新加载的情况下实现它？

这是我的控制器。

 public function view_maps()
  {
    if($this->input->post())
      {
        $center = $this->input->post('city_name');
        $this->load->library('setting/googlemaps');
        $config=array();
        $config['center'] = $center;
        $config['zoom'] = 'auto';
        $this->googlemaps->initialize($config);

        $marker = array();
        $marker['position'] = 'London,Uk';
        $this->googlemaps->add_marker($marker);

        $data['map'] = $this->googlemaps->create_map();

        $this->load->view('dashboard/header');
        $this->load->view('google_maps/google_maps',$data);
        $this->load->view('dashboard/footer');
      }
      else
      {
        $this->load->library('setting/googlemaps');
        $config=array();
        $config['center'] = 'adelaide,australia';
        $this->googlemaps->initialize($config);
        $data['map'] = $this->googlemaps->create_map();

        $this->load->view('dashboard/header');
        $this->load->view('google_maps/google_maps',$data);
        $this->load->view('dashboard/footer');
      }
  }

以下是我的观点

 <!DOCTYPE html>
<html>
<head>
    <title>Google Maps</title>

    <?php echo $map['js']; ?>
</head>
<body>

 <form id="addschoolform" action="<?php echo site_url('setting/view_maps')?>" id="submit"  enctype="multipart/form-data" novalidate="novalidate" method="post">

<div>
    <div class="form-group">

               <label class="control-label">
                            Select Area<span class=" symbol required"></span>
                </label>   

            <select class="form-control" id="city_name" name="city_name" onchange="myFunction()">
                    <option value="">--Select Area--</option>

                    <option  value="Manchester,England">Manchester</option>
                    <option  value="London,England">London</option>

                    <option  value="Liverpool,England">Liverpool</option>

           </select>
             </div>

</div>
<div class="row">
                <div class="col-md-4 col-md-offset-8">
                  <button type="submit" id="submit_date" class="btn btn-yellow btn-block">
                    Save Data &ensp;<i class="fa fa-arrow-circle-right"></i>
                  </button>
                </div>
              </div>

</form>

<?php

 echo $map['html']; ?>

</body>
</html>

这是我正在使用的Javascript文件。

    <script>
function myFunction()
{

var marker_id = document.getElementById("city_name").value;
// alert(marker_id);
$('.show_map').html('');

// $( ".show_map" ).empty();
// $( ".map_js" ).empty();

// jQuery('#city_name div').html('');
// alert(sell_order_id);

  var base_path = 'http://localhost/point_of_sale_system/';


   $.ajax({
     type: "POST",
   dataType:'html',
   url: base_path+"setting/get_marker_details",
     data:({
      'marker_id':marker_id
     }),
   beforeSend:function() {
    overlay_ajax();
                  },      
    success:function(data)

    {
        //alert(data);
        $( ".show_map_mini" ).append(data);
        //$( ".show_map" ).append(data);
        //$( ".show_map_again_mini" ).append(data);

        $('.show_map').html('dasdsadata');

    },
     error:function(){
            alert('ajax call failed...');
                   }, 
     complete: function(){ 
           $.unblockUI();
                }            
 });
} 

</script>

我在javascript函数中调用的控制器函数。

    public function get_marker_details()
{
        $this->load->library('setting/googlemaps');
        $config=array();
        $config['center'] = 'adelaide,australia';
        $this->googlemaps->initialize($config);
        $data = $this->googlemaps->create_map();

        echo $data['html'];

    //  echo  $this->load->view('google_maps/google_maps',$data);

        //echo json_encode($data);

}

CodeIgniter谷歌地图。如何在不重页加载的情况下更新Google地图标记（使用ajax）

0 个答案: