Ошибка Google Maps Script в Onion.js

Этим утром я только начал получать ошибку google maps script.

Линия: 0 Char: 0 Ошибка: script Ошибка Код: 0 URL:

Я вернул все мои изменения кода обратно к более ранней версии, но он по-прежнему сохраняется.

Я буду включать ниже script, но я должен упомянуть, что это выполняется в Delphi TWebBrowser, который взаимодействует с IE.

Я могу запустить свою программу, взаимодействовать с страницей, а затем позволить ей сидеть без дела. После 20 секунд или около того, без какого-либо взаимодействия с пользователем, я получаю постоянную ошибку выше. Когда я закрываю окно сообщения об ошибке, он немедленно открывается с тем же сообщением.

Я работаю над этим проектом уже несколько месяцев, и теперь это началось. Я отбросил несколько версий, но он по-прежнему сохраняется.

С чего начать?

<html>
  <head>
    <title>Find your Qtr minute locator</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?api=AIzaSyAa7YZpvi09ig92s_BLP2H3QVLTmoqdcQQ&amp;v=3.exp&amp;libraries=geometry&amp;sensor=false"></script>
  </head>
  <body><!-- Declare the div, make it take up the full document body -->
    <div id="map-canvas" style="HEIGHT: 100%; WIDTH: 100%"></div>
    <script type="text/javascript">
    var map;
    var idx = 0;
    var qtrArray = [];
    var userGridArray = [];
    var Startlatlng = "";
    var llOffset = 0.00416666666667;
    var babyOffset = (llOffset/2);  // offsets gridSelector 1/2 qtr min
    var drawGridSelectBox = false;
    var findNeighbor = false;
    var firstRun = true;
    var drawGridBox = false;
    var deSelectOn = false;
    var GridSelect = false;
    var gridOverBox = new google.maps.Polygon();
    var gridSelectBox = new google.maps.Polygon();

    var gridline;
    var polylinesquare;
    var latPolylines = [];
    var lngPolylines = [];
    var lngLabels = [];
    var otherColor =  "#128A00";
    var bounds = new google.maps.LatLngBounds();

    function initialize() {
        map = new google.maps.Map(document.getElementById("map-canvas"), {
            center: new google.maps.LatLng(34.0, -84.0),
            zoom: 14,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        });

        google.maps.event.addListener(map, "click", function (event) {
            if (!google.maps.geometry.poly.containsLocation(event.latLng, gridSelectBox)) {
                map.setZoom(14);
              if (findNeighbor)
                MarkArea(event.latLng.lat(), event.latLng.lng());
                if (drawGridSelectBox) {
                  createGridSelectBox(event.latLng);
                  GridSelect = !firstRun;
                    if (!GridSelect) {
                        ClearGrid()
                    }
                }

                for(var xx=0;xx<latPolylines.length;++xx){
                    for(var yy=0;yy<lngPolylines.length-1;++yy){
                        var latLng=new google.maps.LatLng(latPolylines[xx].getPath().getAt(0).lat(),
                                lngPolylines[yy].getPath().getAt(0).lng());

                        if ((google.maps.geometry.poly.containsLocation(latLng, gridSelectBox))&&(!firstRun))
                        {
                            drawGridBox = true;
                            createGridBox(latLng);
                        }
                    }
                }
                firstRun = false;
                map.panTo(event.latLng);
                drawGridBox = false;

            }});

        DrawGridOn();
        google.maps.event.addListener(map, "idle", function () {
            createGridLines(map.getBounds());
        });
    }  // initialize

    google.maps.event.addDomListener(window, "load", initialize);

    function createGridLines(bounds) {
        for (var i = 0; i < latPolylines.length; i++) {
            latPolylines[i].setMap(null);
        }

        latPolylines = [];
        for (var j = 0; j < lngPolylines.length; j++) {
            lngPolylines[j].setMap(null);
        }
        lngPolylines = [];

        for (var k = 0; k < lngLabels.length; k++) {
            lngLabels[k].setMap(null);
        }
        lngLabels = [];

        if (map.getZoom() < 10) return;
        var north = bounds.getNorthEast().lat();
        var east  = bounds.getNorthEast().lng();
        var south = bounds.getSouthWest().lat();
        var west  = bounds.getSouthWest().lng();

    // define the size of the grid
        var topLat    = Math.ceil(north / llOffset) * llOffset;
        var rightLong = Math.ceil(east / llOffset) * llOffset;

        var bottomLat = Math.floor(south / llOffset) * llOffset;
        var leftLong  = Math.floor(west / llOffset) * llOffset;


        var qtrNELatLngCode = ddToQM(topLat, rightLong);
        var qtrNorth = qtrNELatLngCode.substring(0, 5);
        var qtrEast = qtrNELatLngCode.substring(5, 12);
        var qtrSWLatLngCode = ddToQM(bottomLat, leftLong);
        var qtrSouth = qtrSWLatLngCode.substring(0, 5);
        var qtrWest = qtrSWLatLngCode.substring(5, 12);

        for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: "#0000FF",
            strokeOpacity: 0.1,
            strokeWeight: 1
        }));
        for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: "#0000FF",
            strokeOpacity: 0.1,
            strokeWeight: 1
        }));

        if (map.getZoom() < 15) {
            for (var l = 0; l < lngLabels.length; l++) {
                lngLabels[l].setMap(null);
            }
            lngLabels = [];
            return;
        }  // set lngLabels to null

        for(var x=0;x<latPolylines.length;++x){
            for(var y=0;y<lngPolylines.length-1;++y){
                var latLng=new google.maps.LatLng(latPolylines[x].getPath().getAt(0).lat(),
                        lngPolylines[y].getPath().getAt(0).lng());

                var qtrLatLng = ddToQM(latLng.lat(), latLng.lng());

                lngLabels.push(new google.maps.Marker({
                    map:map,
                    position:latLng,
                    icon:{  url:"https://chart.googleapis.com/chart?"
                    +"chst=d_bubble_text_small&chld=bb|"
                    + qtrLatLng
                    +"|FFFFFF|000000",
                        anchor:new google.maps.Point(0,42)
                    }
                }));
            }
        }
        external.ShowQtrMinBounds(qtrNorth, qtrSouth, qtrEast, qtrWest);
    }  // end createGridLines

    function createGridSelectBox(point) {
    // Square limits
        var smPoint = point;

        var bottomLeftLat  = (Math.floor(point.lat() / llOffset) * llOffset) - babyOffset;
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset) - babyOffset;


        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset),  //lwr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset),  //upr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong)];  //upr left
    //auto-complete to lwr left

        if (drawGridSelectBox == true) {
            gridSelectBox = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:true,
                geodesic:true,
                editable :true,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });

            gridSelectBox.setMap(map);
            drawGridSelectBox = false;
        }
    }

    function MarkArea(Lat, Lng) {
        var latLng = new google.maps.LatLng(Lat,Lng);
        drawUserGrids(latLng);
    }

    function SaveQtrMin(){
                for (var m in qtrArray) {
                    external.SaveQtrMinutes(qtrArray[m].qtrMinute);
                }
    }

     function DrawGridOn() { //creates GridSelectBox
        addGridOn = false;
        drawGridSelectBox = true;
        firstRun = true;
    }

    function DrawGridOff() {
            gridSelectBox.setMap(null);
            drawGridSelectBox = false;
    }

    function GotoLatLng(Lat, Lng) {
            var latlng = new google.maps.LatLng(Lat,Lng);
            map.setCenter(latlng);
    }

    function DeSelectOn(){
        deSelectOn = true;
        addGridOn = false;
    }

    function DeSelectOff(){       // Allows removing 1 QtrMin
        deSelectOn = false;
    }

    function AddGridOn(){        // Allows adding 1 QtrMin
        addGridOn = true;
        deSelectOn = false;
    }

    function AddGridOff(){
        addGridOn = false;
    }

    function ClearGrid() {
        if (qtrArray) {
            for (var i in qtrArray) {
                qtrArray[i].setMap(null);
            }
        }
        qtrArray=[];
        idx = 0;
    }

    function ClearUserGrid() {
        if (userGridArray) {
            for (var i in userGridArray) {
                userGridArray[i].setMap(null);
            }
        }
        userGridArray=[];
    }

    function drawUserGrids(point) {
    // Square limits

        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);

        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left


        drawGridBox = true;

        if (drawGridBox == true) {

            gridUserArea = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor:otherColor,
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });

            gridUserArea.setMap(map);
            userGridArray.push(gridUserArea);
        }
    }

     function createGridBox(point) {
        // Square limits
        var arrayIdx = 0;
        var addListenersOnPolygon = function(polygon) {
            google.maps.event.addListener(polygon, 'click', function (event) {
                if (deSelectOn==true) {
                arrayIdx = qtrArray.indexOf(polygon);
                qtrArray.splice(arrayIdx,1);
                polygon.setMap(null);
                }
            });
        };
        var smPoint = point;

        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);


        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left
        drawGridBox = true;

        if (drawGridBox == true) {
            gridOverBox = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor: "#EAED00",
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1,
                qtrMinute : ddToQM(bottomLeftLat, bottomLeftLong),
                indexID : ++idx
            });

            gridOverBox.setMap(map);
            addListenersOnPolygon(gridOverBox);
            qtrArray.push(gridOverBox);
        }
    }

    function ddToQM(alat, alng) {
        var latResult, lngResult, dmsResult;

        alat = parseFloat(alat);
        alng = parseFloat(alng);

        latResult = "";
        lngResult = "";

        latResult += getDms(alat);
        lngResult += getDms(alng);

        dmsResult = latResult + lngResult;

        // Return the resultant string.
        return dmsResult;
    }

    function toggleGridSelection(){
        GridSelect = true;//(!!GridSelect);
    }

    function findNeighborOn(){
        findNeighbor = true;
        otherColor = randColor();
    }

    function findNeighborOff(){
        findNeighbor = false;
        otherColor =  "#128A00";
    }

    function randColor() {
       var i;
       var colorArray = ["#B2A209","#A4A07B","#B02600","#6CA200","#BC0072","#B1ADFF","#16CADB","#A1FFD1","#9999CC","#EEFF7C"];

       i = Math.floor((Math.random() *10)+1);
       return colorArray[i];
    }

    function getDms(val) {
    // Required variables
        var valDeg, valMin, valSec, interimResult;
        var qtrMin;
        val = Math.abs(val);

    // ---- Degrees ----
        valDeg = Math.floor(val);
        valMin = Math.floor((val - valDeg) * 60);
        valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;

        if (valSec == 60){
            valMin +=1;
            valSec = 0;
        }
        if (valMin == 60){
            valMin +=1;
            valSec = 0;
        }
        interimResult = valDeg+"";

        if (valMin<10){
            valMin = "0"+valMin;
        }
        interimResult += valMin + "";

        switch(valSec){
            case  0 : qtrMin = "A";
                break;
            case 15 : qtrMin = "B";
                break;
            case 30 : qtrMin = "C";
                break;
            case 45 : qtrMin = "D";
                break;

        }
        interimResult += qtrMin;
        return interimResult;
    }

</script>
  </body>
</html>

Ответы

Ответ 1

Добавление следующего метатега в секции заголовка разрешило эту проблему для меня.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • Метатег X-UA-совместимый позволяет веб-авторам выбирать, что версии Internet Explorer страница должна отображаться как.
  • Режим Edge указывает Internet Explorer отображать содержимое в самом высоком режиме доступны.

Ответ 2

Я также изменил этот тег. затем хорошо работайте. спасибо

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

Он работает как версии 3.22, так и 3.23.

Ответ 3

Ошибка onion.js script, v = 3.22 больше не исправляет проблему. Оказывается, проблема связана с IE и onios.js. Встраивание веб-браузера по умолчанию использовало стандарт IE7, и проблема в том, что мое исправление было добавлением в реестр следующим образом: -

[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

[HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

Ответ 4

Google выпустила новую версию 3.24 24 мая 2016 года.

В соответствии с моделью версий существует только три версии: замороженные, выпущенные и экспериментальные.

https://developers.google.com/maps/documentation/javascript/versions

Версия 3.22 удалена и больше не может быть доступна.

Новая версия поддерживает только IE10 и IE11, режим совместимости не поддерживается.

https://developers.google.com/maps/documentation/javascript/browsersupport

Элемент управления WebBrowser может по умолчанию использовать режим рендеринга IE 7:

https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

Вы должны заставить элемент управления более новую версию IE

http://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl

Используйте последнюю версию Internet Explorer в элементе управления веб-браузером

Кроме того, вы можете добавить метатег в свой html

Похоже, что новая версия API JavaScript для Карт основывается на глобальном объекте JSON, который недоступен в IE7. Таким образом, вы также можете попробовать polyfill JSON:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Ответ 5

У меня была такая же ошибка. Я только что нашел решение, которое сработало для меня.

Я только добавил "& v = 3.22" в URL-адресе Карт Google. Вот так:

http://maps.google.com/maps/api/js?sensor=true&v=3.22

Ответ 6

У меня была аналогичная проблема, и предоставленное решение не сработало для меня. Я получал ошибку в Delphi внутри элемента управления TWebBrowser также с метатегом.

Я понял проблему.

Onion.js вызывает ошибку, поскольку он вызывает JSON.parse.

JSON Parse не поддерживается элементом управления веб-браузером. Вы можете проверить это, добавив это в свой JavaScript (уже цитируемый для Delphi):

'var code = ''"\u2028\u2029"''; JSON.parse(code); ' +

Каждый браузер должен выполнить

var code = '"\u2028\u2029"';
JSON.parse(code);

При выполнении в Delphi он мгновенно запускает ошибку.

Вы можете избежать всего этого с помощью JSON3 polyfill (уже указан для Delphi):

'<script src="https://cdn.jsdelivr.net/json3/3.3.2/json3.js"></script>'  +

Тогда JSON будет определяться и работать как ожидалось, разрешая проблему.