从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