0

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

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

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

类型错误：“未定义”不是函数

此错误在“新 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 库中找到了这个示例，所以它应该可以正常工作。此致。

编辑：我已经在 J​​SFiddle (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)});
4

2 回答 2

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 发行说明。

然后，我也得到的错误是由于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 中对其进行了测试，示例加载成功。

于 2016-06-13T15:43:18.823 回答
0

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

meta http-equiv="X-UA-Compatible" 内容="IE=7"

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

元 http-equiv="X-UA-Compatible" 内容="IE=edge"

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

干杯。

于 2016-06-14T12:26:56.990 回答