Question

我在codeigniter中显示谷歌地图，这一切都很好。但我在ajax调用中使用相同的代码，但它输出的是一个空的map_canvas，所以我什么也看不到..

public function googlemapsAjax()
{
    echo "
    <script type='text/javascript'>
        $.getScript('/assets/js/admin.js');
    </script>
    ";



    $this->load->library('googlemaps');

$config['center'] = '50.850340, 4.351710';
$config['zoom'] = '6';
$config['places'] = TRUE;
$config['placesAutocompleteInputID'] = 'location';
$config['placesAutocompleteBoundsMap'] = TRUE; // set results biased towards the maps viewport
$config['placesAutocompleteOnChange'] = '

var geocoder = new google.maps.Geocoder();
        var address = document.getElementById("location").value;
        geocoder.geocode({ "address": address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if(typeof marker != "undefined"){marker.setMap(null)};
                $("#location").parent().removeClass("has-error");
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                $("#latitude").val(latitude);
                $("#longitude").val(longitude);
                 marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(latitude, longitude)
});
map.setCenter(new google.maps.LatLng(latitude, longitude), 16);
map.setZoom(16);
google.maps.event.addListener(marker, "dragend", function (event) {
latitude = this.getPosition().lat();
longitude = this.getPosition().lng();
$("#latitude").val(latitude);
$("#longitude").val(longitude);
});
            } else {
                alert("Request failed.")
                $("#location").parent().addClass("has-error");
            }
        });

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

    $this->load->view('admin/ajax/view_googlemaps_ajax', $data);
}

在我看来，我有

echo $map['js'];

和

echo $map['html'];

任何人都知道为什么我在map_canvas中没有输出？如果我不在ajax上做它，它的效果很好..

Answer 1

@jen_vdp - 感谢您使用我的图书馆。我已经看过并相信问题与如何调用/初始化地图有关。

如果您恢复到非ajax版本并查看页面源，您将看到通过以下代码初始化地图：

google.maps.event.addDomListener(window, "load", initialize_map);

显然，如果您通过AJAX加载地图，窗口已经加载，因此，我不会认为＆＃39;这将被执行。

我的建议是在AJAX请求的成功回调上手动调用JS函数 initialize_map（）。

这是我能想到的唯一一件事。如果您继续遇到问题，请告诉我，我会进一步调查。

谢谢，史蒂夫

在ajax上的codeigniter加载googlemaps给出了空的map_canvas

1 个答案: