谷歌地图IE8的.setMap问题 [英] Google maps .setMap issue for IE8

问题描述

所以我在这里遇到了一些问题。这个脚本在除IE8之外的所有浏览器中工作正常

route（）函数被调用 - 并且被赋予Google地图编码的多边形和折线。每当IE8尝试执行setMap时脚本都会中断setMap

我认为这个问题与地图超出范围有关吗？或者尾随的逗号错误？我只是花了最近几个小时玩这个，我无法修复它。

任何想法？非常感激。通常不喜欢粘贴整个代码，因为它有点压倒性，但在这种情况下需要它。

  var markersArray = []; 
 
 
函数initMap（lat，lng）{
 if（lat）{
 
 var myLatLng = new google.maps.LatLng（lat，lng ）; 
 var zoomi = 13; 
} else {
 
 var myLatLng = new google.maps.LatLng（54.162434，-2.285156）; 
 var zoomi = 5; 
} 
 
 var myOptions = {
 zoom：zoomi，
 zoomControl：true，
 panControl：false，
 streetViewControl：false，
 zoomControlOptions：{
 style：google.maps.ZoomControlStyle.LARGE，
 position：google.maps.ControlPosition.LEFT_CENTER 
}，
 center：myLatLng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 
 map = new google.maps.Map（document.getElementById（map），myOptions）; 
 
 
 
函数路由（journeyPolyy，journeyLine，startLat，startLng，endLat，endLng）{
 
 reset（）; 
 
 var startLatLng = startLat +'，'+ startLng; 
 
 var start = new google.maps.LatLng（startLat，startLng）; 
 var end = new google.maps.LatLng（endLat，endLng）; 
 
 var decodedPath = google.maps.geometry.encoding.decodePath（journeyLine）; 
 var flightPath = new google.maps.Polyline（{
 path：decodedPath，
 strokeColor：'blue'，
 strokeOpacity：0.5，
 strokeWeight：5 
}）; 
 markersArray.push（flightPath）; 
 
 flightPath.setMap（map）; 
 var marker = new google.maps.Marker（{
 position：start 
}）; 
 
 markersArray.push（marker）; 
 
 
 marker.setMap（map）; 
 
 var endPpoint = new google.maps.Marker（{
 position：end 
}）; 
 markersArray.push（endPpoint）; 
 
 
 endPpoint.setMap（map）; 
 
 poly = journeyPolyy.replace（/ \\\\\ / g，\\）; 
 
 var decodedPath = google.maps.geometry.encoding.decodePath（poly）; 
 
 var decodedLevels = decodeLevels（BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB）; 
 
 var setRegion = new google.maps.Polygon（{
 path：decodedPath，
 levels：decodedLevels，
 strokeColor：＃FF0000，
 strokeOpacity：0.8，
 strokeWeight：1，
 fillColor：'＃FF0000'，
 fillOpacity：0.1，
 map：map 
}）; 
 setRegion.setMap（map）; 
 markersArray.push（setRegion）; 
 var obj = document.getElementById（'map'）; 
 obj.style.visibility ='visible'; 
 HideContent（'mainContent'）; 
 map.setCenter（start）; 
 map.setZoom（13）; 
} 
 
 
 function decodeLevels（encodedLevelsString）{
 var decodedLevels = []; （var i = 0; i< encodedLevelsString.length; ++ i）{
 var level = encodedLevelsString.charCodeAt（i） -  63; 
 
。 
 decodedLevels.push（level）; 
} 
返回decodedLevels; 
} 
 
函数reset（）{
 if（markersArray）{
 for（i在markersArray中）{
 markersArray [i] .setMap（null ）; 
} 
 markersArray.length = 0; 
} 
} 
  

解决方案

是一种命名冲突（map-objects名称与元素的id相同）

您可以使用不同的id作为div，不同的名称对于map变量，或者在全局范围内声明map变量：

  var map; 
  

So I've got a bit of a problem here. This script works fine in all browsers apart from IE8

The route() function is called - and is given a Google maps encoded polygon and polyline. The script breaks every time IE8 tries to do setMap

I'm thinking the issue is something to do with map being out of its scope? Or a trailing comma error? I just spent the last few hours playing with thisand I couldn't fix it.

Any ideas?? Much appreciated. Dont normally like to paste the whole code as it's a bit overwhelming but it's needed in this case.

var markersArray = [];


function initMap(lat,lng) {
    if(lat) {

        var myLatLng = new google.maps.LatLng(lat, lng);
        var zoomi=13;
    }else{

        var myLatLng = new google.maps.LatLng(54.162434, -2.285156);
        var zoomi=5;
    }

    var myOptions = {
        zoom: zoomi,
         zoomControl: true,
        panControl: false,
       streetViewControl: false,
       zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
     },
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}


function route(journeyPolyy,journeyLine,startLat,startLng,endLat,endLng) {

reset();

    var startLatLng=startLat + ',' + startLng;

    var start = new google.maps.LatLng(startLat,startLng);
    var end = new google.maps.LatLng(endLat,endLng);

    var decodedPath = google.maps.geometry.encoding.decodePath(journeyLine);
      var flightPath = new google.maps.Polyline({
        path: decodedPath,
        strokeColor: 'blue',
        strokeOpacity: 0.5,
        strokeWeight: 5
      });
    markersArray.push(flightPath);

    flightPath.setMap(map);
     var marker = new google.maps.Marker({
        position: start
    });

    markersArray.push(marker);


    marker.setMap(map);

     var endPpoint = new google.maps.Marker({
        position: end
    });
    markersArray.push(endPpoint);


    endPpoint.setMap(map);

    poly = journeyPolyy.replace(/\\\\/g,"\\");

    var decodedPath = google.maps.geometry.encoding.decodePath(poly);

    var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");

    var setRegion = new google.maps.Polygon({
        path: decodedPath,
        levels: decodedLevels,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor    : '#FF0000',
        fillOpacity  : 0.1,
        map: map
    });
    setRegion.setMap(map);
    markersArray.push(setRegion);
        var obj= document.getElementById('map');
    obj.style.visibility='visible';
    HideContent('mainContent');
    map.setCenter(start); 
    map.setZoom(13); 
}


function decodeLevels(encodedLevelsString) {
    var decodedLevels = [];

    for (var i = 0; i < encodedLevelsString.length; ++i) {
        var level = encodedLevelsString.charCodeAt(i) - 63;
        decodedLevels.push(level);
    }
    return decodedLevels;
}

function reset() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

解决方案

There is a naming-conflict (the map-objects name is the same like the id of the element)

You may either use a different id for the div, a different name for the map-variable, or declare the map-variable in global scope:

var map;

这篇关于谷歌地图IE8的.setMap问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！