Question

我有一张坐标绘制的地图。它工作3天前，但现在没有显示。

代码： google.load（“可视化”，“1”，{packages：[“corechart”]}）;

错误：

jsapi：22一个Parser-blocking，cross-origin script， https://www.google.com/uds/?file=visualization&v=1&packages=corechart，通过document.write调用。如果，浏览器可能会阻止此操作该设备网络连接较差.google.loader.f @ jsapi：22 2jsapi：22一个Parser-blocking，cross-origin script， https://www.google.com/uds/api/visualization/1.0/1195ca6324d5ce101c2f520f3c62c843/format+pt_PT,default+pt_PT,ui+pt_PT,corechart+pt_PT.I.js，通过document.write调用。如果，浏览器可能会阻止此操作设备网络连接不良。

我试着改为：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

google.charts.load('current', {'packages':['corechart', 'map']});
google.charts.setOnLoadCallback(CarregaMapa("map-geral","eda",continente,7,-1,"#FFF",1000,600));

我收到错误：

loader.js：152 Uncaught TypeError：a.shift（...）不是函数（...）

更新

我改为

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {'packages':['corechart', 'map']});

 MapaConcelhos.map = new          google.visualization.Map(document.getElementById(mapa), {
                scrollwheel: false,
                draggable: isDraggable,
                disableDoubleClickZoom: true,
                disableDefaultUI: true,
                center: local,
                mapTypeId: "",
                backgroundColor: bk,
                zoom: zoomlocal
            });

但我必须在地图上添加一个多边形：

var concelho = new google.maps.Polygon({
                paths: coords,
                idc: idconcelho,
                strokeColor: "black",
                strokeOpacity: 0.3,
                strokeWeight: 1,
                fillColor: item.Cor ? item.Cor : "white",
                fillOpacity: 0.8,
                html: contentString 
            });

concelho.setMap(MapaConcelhos.map);

所以错误是：

setMap：不是Map的实例

是否可以将多边形添加到可视化地图？

为什么我不能使用旧代码？为什么jsapi有警告并且不再绘制地图和多边形？

旧代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load("visualization", "1", {packages:["corechart"]})
var MapaConcelhos = CarregaMapa("map-geral","eda",continente,7,-1,"#FFF",1000,600);


var mapbounds = new google.maps.LatLngBounds();
var centromapa = new google.maps.LatLng();
var isDraggable = !('ontouchstart' in document.documentElement);
var longpress = false;


function CarregaMapa(mapa,mapatipo,local,zoomlocal,idd, bk,w,h) {

    var MapaConcelhos = {
        concelhos: [],
        addlegenda: function(item) {


        var leg = {
        ordem: item.Legenda_key,
        cor: item.Cor,
        label: item.Label
        }

        Array.prototype.inArray = function(comparer) { 
            for(var i=0; i < this.length; i++) { 
                if(comparer(this[i])) return true; 
            }
            return false; 
        }; 

        Array.prototype.sortOn = function(key){
            this.sort(function(a, b){
                if(a[key] < b[key]){
                    return -1;
                }else if(a[key] > b[key]){
                    return 1;
                }
                return 0;
            });
        }

        Array.prototype.pushIfNotExist = function(element, comparer) { 
            if (!this.inArray(comparer)) {
               Mapalegenda.push(element);
               Mapalegenda.sortOn("ordem")
               var legenda="<p><b>Legenda:</b></p>";
               for (var i=0; i<Mapalegenda.length; i++) {
               legenda = legenda +'<div id="map-legenda-linha"><div id="map-legenda-cor" style="background: ' + Mapalegenda[i].cor + ';"></div>' + Mapalegenda[i].label + '</div>';
               }
               document.getElementById("map-legenda").innerHTML = legenda;
            }
        }; 

      Mapalegenda.pushIfNotExist(leg, function(e) { 
            return e.cor === leg.cor && e.label === leg.label; 
        });


        },
        addConcelho: function(item) {
            //Set concelho coordenadas
            var coords = [];
            var coord = item.Coordenadas.split("|");
            for (var i = 0; i < coord.length; i++) {
                var latlng = coord[i].split(",");
                coords.push(new google.maps.LatLng(latlng[1], latlng[0]));
            }
            var contentString="<b>"+item.Nome+"</b>"+item.Descricao;
            //Create polygon
            var idconcelho=item.Id;
            var concelho = new google.maps.Polygon({
                paths: coords,
                idc: idconcelho,
                strokeColor: "black",
                strokeOpacity: 0.3,
                strokeWeight: 1,
                fillColor: item.Cor ? item.Cor : "white",
                fillOpacity: 0.8,
                html: contentString 
            });

            MapaConcelhos.concelhos.push(concelho);
            concelho.setMap(MapaConcelhos.map);

            var bounds = new google.maps.LatLngBounds();
            for (var i=0; i< coords.length; i++) {
                bounds.extend(coords[i]);
                mapbounds.extend(coords[i]);
            }

            var centroconcelho = bounds.getCenter();
            var timer = null;



            if (isDraggable)
            {
             google.maps.event.addListener(concelho,"click",function(){
                showConcelho(concelho.idc);});
            }
            else
            {

            google.maps.event.addListener(concelho, 'mousedown', function(event){

             start = new Date().getTime();  
            });

            google.maps.event.addListener(concelho, 'mouseup', function(){

                        end = new Date().getTime();
                            longpress = (end - start < 300) ? false : true;         
                        if (longpress)  showConcelho(concelho.idc);  
                    });

            }//else

           MapaConcelhos.addlegenda(item);
            if (item.Ultimo=="1")
            { 
                MapaConcelhos.map.fitBounds(mapbounds);
        MapaConcelhos.map.setCenter(local);
            }

           function isInfoWindowOpen(infoWindow){
                var map = infoWindow.getMap();
                return (map !== null && typeof map !== "undefined");
            }


                var minZoom=8;
                if (idd==41 || idd==-1) minZoom=7;

                google.maps.event.addListenerOnce(MapaConcelhos.map, 'bounds_changed', function(event) {
                        if (this.getZoom() < minZoom) {
                        this.setZoom(minZoom);
                         MapaConcelhos.map.setCenter(local);
                        }
                    });                         

            function showArrays(event) {
                var vertices = this.getPath();
                var contentString =this.html;
                infoWindow.setContent(contentString);
                infoWindow.setPosition(event.latLng);
                infoWindow.open(MapaConcelhos.map);                 
            }   

        function showConcelho(idc) {
                $.fancybox({
                        href : "/ficha.php?id="+idc,
                        width : w,
                        height   : h,
                        fitToView   : true,
                        autoSize    : false,
                        type: "iframe",
                        padding: 0,
                        openEffect : "elastic",
                        openSpeed  : 150,
                        aspectRatio : true,
                        closeEffect : "elastic",
                        closeSpeed  : 150,
                        closeClick : true,
                        scrolling : "auto",
                        preload   : true
                    });             
            }  

        },

        map: undefined,
        mapContainer: document.getElementById(mapa),
        initialize: function() {
            google.maps.visualRefresh = true;
             MapaConcelhos.map = new google.maps.Map(document.getElementById(mapa), {
                scrollwheel: false,
                draggable: isDraggable,
                disableDoubleClickZoom: true,
                disableDefaultUI: true,
                center: local,
                mapTypeId: "",
                backgroundColor: bk,
                zoom: zoomlocal
            });


        }
    };

    var requester = {};            
    requester.Request = function () {

        $.ajax({
            url: "/scripts/concelhos.php",
            type: "GET",
            data: { tipo: mapatipo, distrito:idd},
            contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",
            dataType: "json",
        }).done(function(result) {
            if (result) {
                $.each(result, function(index, item) {
                    MapaConcelhos.addConcelho(item);
                });

            } else {


            }
        }).error(function() {
        });
    };



    MapaConcelhos.initialize();
    requester.Request();

 return MapaConcelhos;           

} //CarregaMapa

新代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {
  'callback': function () {
var MapaConcelhos = CarregaMapa("map-geral","eda",continente,7,-1,"#FFF",1000,600);
  },
  'packages': ['corechart', 'map']
});

var mapbounds = new google.maps.LatLngBounds();
var centromapa = new google.maps.LatLng();
var isDraggable = !('ontouchstart' in document.documentElement);
var longpress = false;


function CarregaMapa(mapa,mapatipo,local,zoomlocal,idd, bk,w,h) {

    var MapaConcelhos = {
        concelhos: [],
        addlegenda: function(item) {


        var leg = {
        ordem: item.Legenda_key,
        cor: item.Cor,
        label: item.Label
        }

        Array.prototype.inArray = function(comparer) { 
            for(var i=0; i < this.length; i++) { 
                if(comparer(this[i])) return true; 
            }
            return false; 
        }; 

        Array.prototype.sortOn = function(key){
            this.sort(function(a, b){
                if(a[key] < b[key]){
                    return -1;
                }else if(a[key] > b[key]){
                    return 1;
                }
                return 0;
            });
        }

        Array.prototype.pushIfNotExist = function(element, comparer) { 
            if (!this.inArray(comparer)) {
               Mapalegenda.push(element);
               Mapalegenda.sortOn("ordem")
               var legenda="<p><b>Legenda:</b></p>";
               for (var i=0; i<Mapalegenda.length; i++) {
               legenda = legenda +'<div id="map-legenda-linha"><div id="map-legenda-cor" style="background: ' + Mapalegenda[i].cor + ';"></div>' + Mapalegenda[i].label + '</div>';
               }
               document.getElementById("map-legenda").innerHTML = legenda;
            }
        }; 

      Mapalegenda.pushIfNotExist(leg, function(e) { 
            return e.cor === leg.cor && e.label === leg.label; 
        });


        },
        addConcelho: function(item) {
            //Set concelho coordenadas
            var coords = [];
            var coord = item.Coordenadas.split("|");
            for (var i = 0; i < coord.length; i++) {
                var latlng = coord[i].split(",");
                coords.push(new google.maps.LatLng(latlng[1], latlng[0]));
            }
            var contentString="<b>"+item.Nome+"</b>"+item.Descricao;
            //Create polygon
            var idconcelho=item.Id;
            var concelho = new google.maps.Polygon({
                paths: coords,
                idc: idconcelho,
                strokeColor: "black",
                strokeOpacity: 0.3,
                strokeWeight: 1,
                fillColor: item.Cor ? item.Cor : "white",
                fillOpacity: 0.8,
                html: contentString 
            });

            MapaConcelhos.concelhos.push(concelho);
            concelho.setMap(MapaConcelhos.map);

            var bounds = new google.maps.LatLngBounds();
            for (var i=0; i< coords.length; i++) {
                bounds.extend(coords[i]);
                mapbounds.extend(coords[i]);
            }

            var centroconcelho = bounds.getCenter();
            var timer = null;



            if (isDraggable)
            {
             google.maps.event.addListener(concelho,"click",function(){
                showConcelho(concelho.idc);});
            }
            else
            {

            google.maps.event.addListener(concelho, 'mousedown', function(event){

             start = new Date().getTime();  
            });

            google.maps.event.addListener(concelho, 'mouseup', function(){

                        end = new Date().getTime();
                            longpress = (end - start < 300) ? false : true;         
                        if (longpress)  showConcelho(concelho.idc);  
                    });

            }//else

           MapaConcelhos.addlegenda(item);
            if (item.Ultimo=="1")
            { 
            //MapaConcelhos.map.fitBounds(mapbounds);
            //MapaConcelhos.map.setCenter(local);
            }

           function isInfoWindowOpen(infoWindow){
                var map = infoWindow.getMap();
                return (map !== null && typeof map !== "undefined");
            }


                var minZoom=8;
                if (idd==41 || idd==-1) minZoom=7;

                google.maps.event.addListenerOnce(MapaConcelhos.map, 'bounds_changed', function(event) {
                        if (this.getZoom() < minZoom) {
                        this.setZoom(minZoom);
                         MapaConcelhos.map.setCenter(local);
                        }
                    });                         

            function showArrays(event) {
                var vertices = this.getPath();
                var contentString =this.html;
                infoWindow.setContent(contentString);
                infoWindow.setPosition(event.latLng);
                infoWindow.open(MapaConcelhos.map);                 
            }   

        function showConcelho(idc) {
                $.fancybox({
                        href : "/ficha.php?id="+idc,
                        width : w,
                        height   : h,
                        fitToView   : true,
                        autoSize    : false,
                        type: "iframe",
                        padding: 0,
                        openEffect : "elastic",
                        openSpeed  : 150,
                        aspectRatio : true,
                        closeEffect : "elastic",
                        closeSpeed  : 150,
                        closeClick : true,
                        scrolling : "auto",
                        preload   : true
                    });             
            }  

        },

        map: undefined,
        mapContainer: document.getElementById(mapa),
        initialize: function() {
            google.maps.visualRefresh = true;
             MapaConcelhos.map = new google.visualization.Map(document.getElementById(mapa), {
                scrollwheel: false,
                draggable: isDraggable,
                disableDoubleClickZoom: true,
                disableDefaultUI: true,
                center: local,
                mapTypeId: "",
                backgroundColor: bk,
                zoom: zoomlocal
            });


        }
    };

    var requester = {};            
    requester.Request = function () {

        $.ajax({
            url: "/scripts/concelhos.php",
            type: "GET",
            data: { tipo: mapatipo, distrito:idd},
            contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",
            dataType: "json",
        }).done(function(result) {
            if (result) {
                $.each(result, function(index, item) {
                    MapaConcelhos.addConcelho(item);
                });

            } else {


            }
        }).error(function() {
        });
    };



    MapaConcelhos.initialize();
    requester.Request();

 return MapaConcelhos;           

} //CarregaMapa

Answer 1

肯定需要使用以下库，删除jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

load语句看起来很好

google.charts.load('current', {'packages':['corechart', 'map']});

但是，setOnLoadCallback需要对函数的引用，而不是函数的结果

无论如何，'callback'也可以添加到load语句中

建议使用以下加载语句...

google.charts.load('current', {
  'callback': function () {
    CarregaMapa("map-geral","eda",continente,7,-1,"#FFF",1000,600);
  },
  'packages': ['corechart', 'map']
});

Answer 2

我找到了解决方案。

为了保持旧代码正常工作，我必须使用冻结版本......

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?**v=3.25**&key=XXX>

我想知道这个版本是否已经退役了什么？

它显示了相同的jsapi警告，但绘制了地图和多边形...

所以问题在于地图api的版本......

Google核心图表地图不再显示

2 个答案: