從Google地圖標記點擊ajax請求后加載地圖

Question

嗨，我在點擊標記時遇到有關創建新地圖的問題。 所以這是我想要的流程：

顯示我包含的標記的默認谷歌地圖 - 我沒關系
點擊標記后，我將創建一個新的地圖，標記將被刪除，然后我將放置一個疊加圖像。

所以問題是每當我點擊標記時，新地圖就不會出現。 這是我的代碼

調節器

public function index()
{

    $config = array();

    $config['center']      = '**.*******, **.*******';
    $config['zoom']        = '6';
    $config['map_height']  = "500px";


    $this->googlemaps->initialize($config);

    $marker = array();
    $marker['position']     = "*********";
    $marker['onclick']      = "
                                $.ajax({  
                                url: 'Welcome/new_map',  
                                success: function(data) {  
                                    $('#v_map').html(data);
                                }  
                            }); 
                            ";

    $marker['animation']    = 'DROP';
    $this->googlemaps->add_marker($marker);

    $marker = array();
    $marker['position']     = "*********";
    $this->googlemaps->add_marker($marker);

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

    $this->load->view('welcome_message', $data);
}

public function new_map(){

    $config = array();

    $config['center']      = '**.*******, **.*******';
    $config['zoom']        = '6';
    $config['map_height']  = "500px";


    $this->googlemaps->initialize($config);

    $marker = array();
    $marker['position']     = "*********";
    $marker['onclick']      = "
                                $.ajax({  
                                url: 'Welcome/new_map',  
                                success: function(data) {  
                                    $('#v_map').html(data);
                                }  
                            }); 
                            ";

    $marker['animation']    = 'DROP';
    $this->googlemaps->add_marker($marker);

    $marker = array();
    $marker['position']     = "*********";
    $this->googlemaps->add_marker($marker);

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

    $this->load->view('map_template', $data);
}

視圖

<html lang="en">
<head>
    <?php echo $map['js']; ?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>  
</head>
<body>
  <div id = "v_map">
    <?php echo $map['html']; ?>
  </div>
</body>
</html>

map_template

<?php echo $map['html']; ?>

我目前正在嘗試修復新地圖將在繼續覆蓋部分之前出現。

PS。 我正在使用Biostall的Google地圖庫來代碼。

Answer 1

在你的public function new_map(){ ，你試圖得到ajax響應，所以你需要

從

  $this->load->view('map_template', $data);

至

 echo $this->load->view('map_template', $data, TRUE);

參考： https ： //www.codeigniter.com/user_guide/general/views.html

將視圖作為數據返回

第三個可選參數允許您更改方法的行為，以便它將數據作為字符串返回，而不是將其發送到您的瀏覽器。 如果要以某種方式處理數據，這可能很有用。 如果將參數設置為TRUE（布爾值），它將返回數據。

這是工作控制器，在CI 2.2.6上，如果您使用的是新版本的codeigniter而不是需要處理文件名約定（類似Ucfirst的方式）：

這是Ref： https ： //codeigniter.com/user_guide/general/styleguide.html

<?php

if (!defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->library('googlemaps');
        $this->load->helper('url');
    }

    public function index()
    {
        $config = array();
        $config['center'] = '37.4419, -122.1419';
        $config['zoom'] = 'auto';
        $config['map_height'] = "500px";
        $this->googlemaps->initialize($config);

        $url = site_url('welcome/new_map');
        $marker = array();
        $marker['position'] = "*********";
        $marker['onclick'] = " 
                                $.ajax({  
                                url: '$url',
                                success: function(data) {  
                                    $('#v_map').html(data);
                                    initialize_map();
                                }
                            }); 
                            ";
        $marker['animation'] = 'DROP';
        $this->googlemaps->add_marker($marker);
        $marker = array();
        $marker['position'] = "*********";
        $this->googlemaps->add_marker($marker);

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

        $this->load->view('map', $data);
    }

    public function new_map()
    {
        // map config
        $config = array();
        $config['center'] = '37.4419, -122.1419';
        $config['zoom'] = 'auto';
        $config['map_height'] = "500px";

        // no need of including script tag again
        $config['maps_loaded'] = 1;

        $this->googlemaps->initialize($config);

        // overlay image
        $groundOverlay = array();
        $groundOverlay['image'] = 'http://maps.google.com/intl/en_ALL/images/logos/maps_logo.gif';
        $groundOverlay['positionSW'] = '40.712216,-74.22655';
        $groundOverlay['positionNE'] = '40.773941,-74.12544';
        $this->googlemaps->add_ground_overlay($groundOverlay);

        // create map
        $data = $this->googlemaps->create_map();

         // ajax response
        echo $data['html'] . $data['js'];

        // Since there is no need of loading, view just used echo
    }
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

查看文件：map.php

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
  <?php echo $map['js']; ?> 
</head>
<body>
  <div id = "v_map">
    <?php echo $map['html']; ?>
  </div> 
</body>
</html>

圖書館：

資料來源： https ： //raw.githubusercontent.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library/master/application/libraries/Googlemaps.php

那么我所擁有的，在我的應用程序文件夾中：

$ pwd
/var/www/html/ci/application

.
├── controllers
│   ├── index.html
│   └── welcome.php
├── libraries
│   ├── Googlemaps.php
│   └── index.html
└── views
    ├── index.html
    ├── map.php
    └── welcome_message.php

訪問：

http://127.0.0.1/ci/index.php/welcome

然后單擊標記，單擊標記后將顯示下面的疊加圖像

疊加圖片：

從Google地圖標記點擊ajax請求后加載地圖

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-07 02:25:49

從Google地圖標記點擊ajax請求后加載地圖

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-07 02:25:49

解決方案1
0 已采納 2017-10-07 02:25:49