我有jvectormap的波兰地图。但是对于我来说,所有的坐标都是未知的(例如[355,271])。从后端,我只有纬度和经度的值,我不知道如何将它们转换为[355,271]。当我尝试将“coords:[355,271]”更改为“latLng:[52.229676,21.012229]”时,我收到错误“Uncaught TypeError:无法读取未定义的属性'0'”。我做错了什么?这是完整的脚本:
jQuery('#vmap').vectorMap({
map: 'pl_mill_en',
backgroundColor: '#FFFFFF',
normalizeFunction: 'polynomial',
hoverOpacity: false,
hoverColor: '#2daae1',
zoomButtons: false,
zoomOnScroll: false,
series: {
regions: [{
values: {
"PGE": '#dee0e3',
"TAURON": '#e8ebee',
"ENERGA": '#ced1d4',
"RWE": '#f5f6f7'
},
attribute: 'fill'
}]
},
markerStyle: {
initial: {
fill: '#b3b2b2',
stroke: false
},
hover: {
stroke: false
}
},
markers: [
{
coords: [320, 86],
name: 'Gdańsk',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [395, 120],
name: 'Olsztyn',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [355, 206],
name: 'Płock',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [355, 271],
name: 'Łódź',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [413, 235],
name: 'Warszawa',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [515, 170],
name: 'Białystok',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [495, 315],
name: 'Lublin',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [405, 340],
name: 'Kielce',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [467, 405],
name: 'Rzeszów',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [365, 400],
name: 'Kraków',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [335, 375],
name: 'Katowice',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [235, 320],
name: 'Wrocław',
style: {fill: '#b3b2b2', stroke: false}
},{
coords: [143, 143],
name: 'Szczecin',
style: {fill: '#2daae1', stroke: false}
},{
coords: [162, 190],
name: 'Gorzów Wlkp.',
style: {fill: '#2daae1', stroke: false}
},{
coords: [180, 265],
name: 'Zielona Góra',
style: {fill: '#2daae1', stroke: false}
},{
coords: [245, 215],
name: 'Poznań',
style: {fill: '#2daae1', stroke: false}
},{
coords: [288, 170],
name: 'Bydgoszcz',
style: {fill: '#2daae1', stroke: false}
}
],
onMarkerLabelShow: function(event, label, index){
//label.html('');
label.css({'background': '#fff', 'color': '#66696d', 'z-index': '99999'});
},
onRegionLabelShow: function(event, label, index){
//label.html('');
label.css({'background': '#fff', 'color': '#66696d', 'z-index': '99999'});
},
onMarkerOver: function(event, code){
jQuery('body').css({'cursor': 'pointer'});
},
onMarkerOut: function(event, code){
jQuery('body').css({'cursor': 'default'});
},
onRegionOver: function(event, code){
jQuery('body').css({'cursor': 'pointer'});
},
onRegionOut: function(event, code){
jQuery('body').css({'cursor': 'default'});
},
});
map = jQuery('#vmap').vectorMap('get', 'mapObject');
map.setScale(1);
markers = map.markers;
for (marker in markers){
var element = markers[marker].element.node;
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", markers[marker].config.coords[0]+8);
text.setAttribute("y", markers[marker].config.coords[1]);
text.textContent = markers[marker].config.name;
text.setAttribute("font-size", "11");
text.setAttribute("color", "#66696d");
text.setAttribute("font-weight", "300");
if (element.parentNode) {
element.parentNode.appendChild(text);
}
};