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 个答案: