ol.Map 不是 Safari 的功能并且地图不在 IE11 中显示答案

【问题标题】：ol.Map not a function to Safari and map not displaying in IE11ol.Map 不是 Safari 的功能并且地图不在 IE11 中显示
【发布时间】：2016-10-11 12:07:23
【问题描述】：

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

该对象无法处理属性或方法“map”（从法语翻译，因此不完全是该消息）。

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

TypeError: 'undefined' 不是函数

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

【问题讨论】：

您能在 JSFiddle 上创建一个实时示例吗？我愿意提供帮助，但如果你能做到这一点，那将对我有很大帮助。另外，请告诉我们您使用的是什么版本。 OL3-Google-Maps 仍在开发中。
已编辑到 JSFidlle 的链接，但地图未显示。我添加了一张我可以在我的网站上看到的地图图片（在 Firefox 和 Chrome 上）。感谢您的宝贵时间！
仅供参考，olgm v0.6 包括 OpenLayers v3.16.0。你不需要单独加载它。
我在 GitHub 上看到了，但如果我不包含 ol.js 和 olgm.js，我会收到错误消息“ol is not defined”。
您在消息中说您使用 0.6，但在 JSFiddle 中您使用 0.4。包含 ol 是 0.6 的新功能。 0.4需要你单独加载ol。

标签： javascript google-maps openlayers-3 ol3-google-maps

【解决方案1】：

我让您的应用程序在 Internet Explorer 和 Safari 中都能正常运行。

首先，您在 Safari 上遇到的错误是关于缺少原生 JavaScript 函数：requestAnimationFramehttp://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中测试过，示例加载成功。

【讨论】：

非常感谢伙计，这将非常有帮助。我刚刚开始使用 JS 做事方式和 OpenLayers，所以我正在做很多新手错误。谢谢你的时间:)
还有一件事，ol3gm.css 不包含 ol.css，就像 ol3gm.js 包含 ol.js 一样？（版本>=0.6）
不，ol3gm.css 不包括 ol.css。不客气。

【解决方案2】：

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

meta http-equiv="X-UA-Compatible" content="IE=7"

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

meta http-equiv="X-UA-Compatible" content="IE=edge"

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

干杯。

【讨论】：