从Google地图标记点击ajax请求后加载地图
use*_*016 6 javascript jquery google-maps codeigniter
嗨,我在点击标记时遇到有关创建新地图的问题.所以这是我想要的流程:
- 显示我包含的标记的默认谷歌地图 - 我没关系
- 单击标记后,我将创建一个新的地图,标记将被删除,然后我将放置一个叠加图像.
所以问题是每当我点击标记时,新地图就不会出现.这是我的代码
调节器
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地图库来代码.
在你的中public function new_map(){，你正在尝试获得ajax响应，所以你需要
从
\n\n $this->load->view(\'map_template\', $data);\n到
\n\n echo $this->load->view(\'map_template\', $data, TRUE);\n\n\n\n参考：https: //www.codeigniter.com/user_guide/general/views.html
\n\n将视图作为数据返回
\n\n第三个可选参数可让您更改该方法的行为，以便它以字符串形式返回数据，而不是将其发送到浏览器。如果您想以某种方式处理数据，这可能很有用。如果将该参数设置为 TRUE（布尔值），它将返回数据。
\n
这是 CI 2.2.6 上的工作控制器，如果您使用的是新版本的 codeigniter，则需要注意文件名约定（类似 Ucfirst 的方式）：
\n\n这是参考：https: //codeigniter.com/user_guide/general/styleguide.html
\n\n<?php\n\nif (!defined(\'BASEPATH\')) exit(\'No direct script access allowed\');\nclass Welcome extends CI_Controller\n{\n public function __construct()\n {\n parent::__construct();\n $this->load->library(\'googlemaps\');\n $this->load->helper(\'url\');\n }\n\n public function index()\n {\n $config = array();\n $config[\'center\'] = \'37.4419, -122.1419\';\n $config[\'zoom\'] = \'auto\';\n $config[\'map_height\'] = "500px";\n $this->googlemaps->initialize($config);\n\n $url = site_url(\'welcome/new_map\');\n $marker = array();\n $marker[\'position\'] = "*********";\n $marker[\'onclick\'] = " \n $.ajax({ \n url: \'$url\',\n success: function(data) { \n $(\'#v_map\').html(data);\n initialize_map();\n }\n }); \n ";\n $marker[\'animation\'] = \'DROP\';\n $this->googlemaps->add_marker($marker);\n $marker = array();\n $marker[\'position\'] = "*********";\n $this->googlemaps->add_marker($marker);\n\n $data[\'map\'] = $this->googlemaps->create_map();\n\n $this->load->view(\'map\', $data);\n }\n\n public function new_map()\n {\n // map config\n $config = array();\n $config[\'center\'] = \'37.4419, -122.1419\';\n $config[\'zoom\'] = \'auto\';\n $config[\'map_height\'] = "500px";\n\n // no need of including script tag again\n $config[\'maps_loaded\'] = 1;\n\n $this->googlemaps->initialize($config);\n\n // overlay image\n $groundOverlay = array();\n $groundOverlay[\'image\'] = \'http://maps.google.com/intl/en_ALL/images/logos/maps_logo.gif\';\n $groundOverlay[\'positionSW\'] = \'40.712216,-74.22655\';\n $groundOverlay[\'positionNE\'] = \'40.773941,-74.12544\';\n $this->googlemaps->add_ground_overlay($groundOverlay);\n\n // create map\n $data = $this->googlemaps->create_map();\n\n // ajax response\n echo $data[\'html\'] . $data[\'js\'];\n\n // Since there is no need of loading, view just used echo\n }\n}\n\n/* End of file welcome.php */\n/* Location: ./application/controllers/welcome.php */\n查看文件：map.php
\n\n<html lang="en">\n<head>\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> \n <?php echo $map[\'js\']; ?> \n</head>\n<body>\n <div id = "v_map">\n <?php echo $map[\'html\']; ?>\n </div> \n</body>\n</html>\n图书馆：
\n\n\n\n那么我的应用程序文件夹中有什么：
\n\n$ pwd\n/var/www/html/ci/application\n\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 controllers\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 welcome.php\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 libraries\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Googlemaps.php\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 map.php\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 welcome_message.php\n使用权：
\n\nhttp://127.0.0.1/ci/index.php/welcome\n然后单击标记，单击标记后您将看到下面的叠加图像
\n\n
叠加图像:\n
| 归档时间： |
|
| 查看次数： |
452 次 |
| 最近记录： |