Question

当我通过ajax加载openlayers 5或6（

$.ajax('/url/', function(data){
$('.content').html(data);
});

）html + js 然后地图区域为空白。

如果我通过Ajax调试，则ol-unselectable div隐藏

当我按下F12按钮时，它似乎可见

所有javascript正在运行

示例：

    $.import('/library/openlayers-6/ol.js', {}, '?ver=1');
    $.import('/library/openlayers-6/ol.css', {}, '?ver=1');
    $.import('/library/geocoder/geocoder.css');
    $.import('/library/geocoder/geocoder.js');

    var map, View, view, ol_easeIn, ol_easeOut, Tile, tileLayer, ol_fromLonLat, ol_toLonLat, OSM, Interaction;

    map = ol.Map;        //~ import map from 'ol/map.js';
    Interaction = ol.interaction;        //~ import map from 'ol/map.js';
    View = ol.View;       //~ import View from 'ol/View.js';
    var {easeIn, easeOut} = ol.easing;     //~ import {easeIn, easeOut} from 'ol/easing.js';
    Tile = ol.layer.Tile; //~ import TileLayer from 'ol/layer/Tile.js';
    var {fromLonLat, toLonLat} = ol.proj;       //~ import {fromLonLat} from 'ol/proj.js';
    OSM = ol.source.OSM; //~ import OSM from 'ol/source/OSM.js';
    positions = new ol.geom.LineString([], /** @type {ol.geom.GeometryLayout} */ ('XYZM'));

    Overlay = ol.Overlay;
    ol_easeIn = easeIn;
    ol_easeOut = easeOut;
    ol_fromLonLat = fromLonLat;
    ol_toLonLat = toLonLat;

    var projection = new ol.proj.get("EPSG:900913");

    view = new View({
        center: ol_fromLonLat([android.long, android.lat]),
        zoom: 17,
        maxZoom: 21,
        projection: projection
    });

    tileLayer = new Tile({
        title: "Map",
        source: new ol.source.OSM()
    });

    map = new map({
        target: 'map',
        interactions: Interaction.defaults().extend([
            new Interaction.DragRotateAndZoom()
        ]),
        controls: ol.control.defaults({
            attribution: false,
            zoom: false,
        }),
        layers: [
            tileLayer
        ],
        view: view
    });

这有什么问题？注意！我不想在ajax之外加载

Answer 1

我找到了解决方案。添加代码

setTimeout(function(){

        map.updateSize();
        map.render();
    }, 100);

Openlayers 6.3.1 Ajax白页

1 个答案: