Question

我想请求帮助如何更改Google Geochart中的圆圈标记

我已经在这个链接上实现了答案。

appendChild to SVG defs to create Image Background in Marker for Geochart API

但是没有运气，标记仍在那里。

这是我的代码：

    <html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript">
        var ivalue_1 = new Array();google.load('visualization', '1', {packages: ['geochart']});function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Country'); // Implicit domain label col.
        data.addColumn('number', 'Value'); // Implicit series 1 data col.
        data.addColumn({type:'string', role:'tooltip', p:{html:true}}); 
        data.addRows([[{v:"NO-02",f:"ASKER & BÆRUM"},1,"ASKER & BÆRUM"]]);
                ivalue_1['NO-02'] = 'NO-02||ASKER & BÆRUM||ASKER & BÆRUM||lorem ipsum';
                    data.addRows([[{v:"NO-03",f:"Oslo"},2,"Oslo"]]);
                ivalue_1['NO-03'] = ' NO-03||Oslo||Oslo||lorem ipsum';
                    data.addRows([[{v:"NO-01",f:"Østfold"},3,"Østfold"]]);
                ivalue_1['NO-01'] = ' NO-01||Østfold||Østfold||lorem ipsum';
                    data.addRows([[{v:"NO-07",f:"Vestfold"},4,"Vestfold"]]);
                ivalue_1['NO-07'] = ' NO-07||Vestfold||Vestfold||lorem ipsum';
                    data.addRows([[{v:"NO-11",f:"Rogaland"},5,"Rogaland"]]);
                ivalue_1['NO-11'] = ' NO-11||Rogaland||Rogaland||lorem ipsum';
                    data.addRows([[{v:"NO-06",f:"Buskerud"},6,"Buskerud"]]);
                ivalue_1['NO-06'] = ' NO-06||Buskerud||Buskerud||lorem ipsum';
                    var options = {   colorAxis: {minValue: 1, maxValue:6,  colors: ['#349429','#349429','#349429','#349429','#349429','#349429']},
        legend: 'none', 
        backgroundColor: {fill:'transparent',stroke:'#CCCCCC' ,strokeWidth:0 },     
        datalessRegionColor: '#ddd',
        displayMode: 'markers', 
        sizeAxis: {minValue: 1, maxValue:6,minSize:10,  maxSize: 10},
        enableRegionInteractivity: 'true',
        resolution: 'provinces',
        region:'NO',keepAspectRatio: false,width:'',
        height:'215',
        tooltip: {isHtml: true, textStyle: {color: '#555555'}, trigger:'focus'} 

      };var geochart = new google.visualization.GeoChart(
          document.getElementById('map_canvas_1'));
    google.visualization.events.addListener(geochart, 'select', function() {
    var selection = geochart.getSelection();

        if (selection.length == 1) {
            var selectedRow = selection[0].row;
            var selectedRegion = data.getValue(selectedRow, 0);

        var japol = ivalue_1[selectedRegion].split('||');
        jQuery("#lightBoxContent h2 span").append(japol[1]); 
        jQuery("#lightBoxContent h3 span").append(japol[2]); 
        jQuery("#lightBoxContent h4 span").append(japol[3]); 
        jQuery("#transparentlightbox").fadeIn("slow");            
        }

        geochart.draw(data, options);
      });

    google.visualization.events.addListener(geochart, 'ready', function () {

                var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
                patt.setAttribute('id', 'img1');
                patt.setAttribute('patternUnits', 'userSpaceOnUse');
                patt.setAttribute('width', '20');
                patt.setAttribute('height', '20');
                patt.setAttribute('x', '0');
                patt.setAttribute('y', '0');

                var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
                image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png');
                image.setAttribute('x', '0');
                image.setAttribute('y', '0');
                image.setAttribute('width', '24');
                image.setAttribute('height', '24');

                var defs = document.getElementsByTagName('defs')[0];

                patt.appendChild(image);
                defs.appendChild(patt);});

                geochart.draw(data, options);
    }
    google.setOnLoadCallback(drawVisualization);
  </script>
  </head>
  <body>
    <div id='map_canvas_1' class='i_world_map' style="width:288px; height: 215px;"></div>
  </body>
</html>

此代码无效。标记仍为绿色，我无法将其更改为自定义png图标。请帮帮我。

提前谢谢。

Answer 1

你必须使用defs标签内的图像模式填充所有标记，这是Demo-Jqfaq，在＆＃34; geochart，＆＃39; ready＆＃39;＆＃34;的底部添加以下代码功能会使它发挥作用。

var markers =  document.getElementsByTagName('circle');
for(i=0; i<markers.length;i++)
{
markers[i].setAttribute("fill", "url(#img1)");
}

将Google Geochart标记更改为自定义png图标

1 个答案: