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

Question

我有一张地图（见下面的代码）OpenLayers3，使用 ol3-google-map 库，它在 Firefox 和 Chrome 中正确显示地图，没有任何错误.但是，在我尝试在 IE 上运行它的地方（它也必须在 IE 上运行），我得到了这个错误：

The object cannot handle property or method "map" (translated from french so not exactly that message).

考虑到我是 OpenLayers3 的新手，我在任何 post 中都没有看到这个错误，这就是为什么我正在寻求一些帮助。我也尝试在 Safari 上运行它，但我得到了另一个错误之王（被 Try/catch 块捕获），它是：

TypeError: 'undefined' is not a function

此错误在 "new ol.Map" 之后弹出。这是我的代码。

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) 上创建了地图，但它不会显示。公平地说，我第一次使用它时，即使我已经 link 需要的文件和东西，我也可能会遗漏一些东西。我使用的是 ol3-google-map 的 0.6 版，但它仍处于测试阶段。尽管如此，有些人已经成功地创建了一张好的地图，所以我显然做错了什么。这是我在 Google Chrome 和 Firefox 上看到的地图的 link：(LINK).

EDIT2：我还没有非常准确地确定问题出在 IE 上的哪个位置。它发生在加载 ol.js 时，错误是这一行的“.map”之一：

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.

Then，我得到的错误也是由于代码执行时 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 上一切正常，我非常高兴。仅供参考，我在 post 上找到了解决方案：。只需将它放在我的 post 中，以防有人遇到与我相同的问题。

干杯。

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

ol.Map not a function to Safari and map not displaying in IE11

javascript

google-maps

openlayers-3

ol3-google-maps