当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Change Google Geochart marker into a custom png icon

问题描述:

I would like to ask for help how to change the circle marker in Google Geochart

I have already implemented the answer on this link.

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

But no luck the marker is still there.

Here is my code:

 <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>

This code is not working. the marker is still green and I cannot change it into a custom png icon. Please help me.

Thank you in advance.

网友答案:

You have to fill all your markers with the image pattern inside defs tag, here is the Demo-Jqfaq, adding below code at the bottom of "geochart, 'ready'" function will make it work.

var markers =  document.getElementsByTagName('circle');
for(i=0; i<markers.length;i++)
{
markers[i].setAttribute("fill", "url(#img1)");
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: