改变谷歌地理图表标记为自定义png图标

Change Google Geochart marker into a custom png icon

本文关键字：记为自定义 png 图标谷歌改变更新时间：2023-09-26

我想寻求帮助如何改变圆圈标记在谷歌地理地图

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

appendChild to SVG defs在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图标。请帮帮我。

提前感谢。

你必须用defs标签内的图像模式填充所有的标记，这是Demo-Jqfaq，在"geochart"底部添加下面的代码，"ready"函数将使其工作。

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