Question

我有一张地图（见下面的代码）OpenLayers3，使用ol3-google-map库，可以在Firefox和Chrome中正确显示地图而不会出现任何错误。但是，我尝试在IE上运行它（并且它也可以在IE上运行），我收到了这个错误：

对象无法处理属性或方法＆＃34; map＆＃34; （翻译自法语，所以不完全是那条消息）。

我在任何帖子中都没有看到这个错误，这就是为什么我要寻求一些帮助，考虑到我是OpenLayers3的新手。我试图在Safari上运行它，我得到了一个不同的错误之王（由Try / catch块捕获），这是：

TypeError：＆＃39; undefined＆＃39;不是一个功能

此错误会在＆＃34; new ol.Map＆＃34;之后弹出。这是我的代码。

var gmap,racine, proj_source,proj_carte;

function init(referentiel,longitude,latitude,modeModification,modeImpression) {
try{
proj_carte = "EPSG:4326";
proj_source = "EPSG:3857";
creerCarte();
} catch (exception1){
    console.log('ERROR1: '+exception1);
}
console.log('Map = '+gmap);
}

function creerCarte(){
try{
    var centre = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

    var googleLayer = new olgm.layer.Google();
    console.log('GoogleLayer created: '+googleLayer);
    var osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM(),
      visible: false
    });
    var source_v = new ol.source.Vector();
    var feature = new ol.Feature(new ol.geom.Point(centre));
    feature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
          'fill': new ol.style.Fill({color: 'rgba(153,51,51,0.3)'}),
          'stroke': new ol.style.Stroke({color: 'rgb(153,51,51)', width: 2}),
          'radius': 20
        })
      }));
    source_v.addFeature(feature);
    var vector = new ol.layer.Vector({
      source: source_v
    }); 
    gmap = new ol.Map({
        view: new ol.View({
        center: centre,
        zoom: 12
        }),
        layers: [googleLayer,osmLayer,vector], 
        target: 'divCarte', 
        interactions: olgm.interaction.defaults()
    });
    var olGM = new olgm.OLGoogleMaps({map: gmap}); // map is the ol.Map instance
    olGM.activate();
} catch (exception2) {
    console.log('ERREUR2: '+exception2);
}
}

我应该补充一点，我在图书馆ol3-google-maps中找到了这个例子，所以它应该可以正常工作。最好的问候。

编辑：我已经在JSFiddle (LINK)上创建了地图，但它不会显示。我第一次使用它是公平的，即使我已经链接了所需的文件和内容，我可能会遗漏一些东西。我使用的是ol3-google-map中的0.6版本，但它仍处于测试阶段。然而，有些人已经成功地创造了一张好地图，所以我显然做错了什么。这是我在Google Chrome和Firefox上看到的地图链接：(LINK)。

EDIT2：我对IE上问题所在的位置并不十分准确。它发生在ol.js的加载上，错误是＆＃39; .map＆＃39;这一行：

Sc="EPSG:3857 EPSG:102100 EPSG:102113 EPSG:900913 urn:ogc:def:crs:EPSG:6.18:3:3857 urn:ogc:def:crs:EPSG::3857 http://www.opengis.net/gml/srs/epsg.xml#3857".split(" ").map(function(a){return new Lj(a)});

Answer 1

我在Internet Explorer和Safari中都使用了您的应用程序。

首先，您在Safari上遇到的错误是缺少原生JavaScript功能：requestAnimationFrame http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame。

通过在页面中包含上面的polyfill服务，您可以确保所有使用过的本机代码始终可用。要加入它，请添加：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

在您的页面中

。另请参阅OpenLayers release notes。

然后，我得到的错误是由于代码执行时divCarte div不可用。要解决此问题，您需要将代码放在函数中并在dom准备就绪时调用它，或者将其放在body标记的末尾。

这是索引页的副本（已在同一目录中下载并解压缩OLGM v0.6）：

<!DOCTYPE html>
<html>

  <head>
    <title>
      GoogleMap with OpenLayers 3
    </title>

    <link rel="stylesheet"
          href="http://openlayers.org/en/v3.16.0/css/ol.css"
          type="text/css" />
    <link rel="stylesheet"
          href="ol3-google-maps-v0.6/ol3gm.css"
          type="text/css" />

    <style type="text/css">
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script src="ol3-google-maps-v0.6/ol3gm-debug.js"></script>
  </head>

  <body>
    <h1> The Map </h1>
    <div id='divCarte' class='map'></div>
    <script src="main.js"></script>
  </body>
</html>

我在Chrome，FF，IE和Safari中对其进行了测试，并且示例已成功加载。

Answer 2

实际上我在IE上的问题来自一个非常不同的东西。我得到的错误来自我网站的HTML头文件中的元标记。旧的是：

meta http-equiv =“X-UA-Compatible”content =“IE = 7”

可能是因为网站是很久以前创建的，我将其更改为：

meta http-equiv =“X-UA-Compatible”content =“IE = edge”

IE现在一切正常，我很高兴。仅供参考，我在这篇文章中找到了解决方案：HERE。只是把它放在我的帖子中以防有人遇到同样的问题。

干杯。

ol.Map不是Safari的功能，也不是IE11中不显示的地图

2 个答案: