将纬度和经度转换为jvectormap坐标

时间:2014-10-28 17:55:43

标签: javascript map jvectormap

我有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);
        }
    };

0 个答案:

没有答案
相关问题