Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/10/2013, 16:25
JUMASOL
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 6 meses
Puntos: 8
Insertar esta función

Hola.

Tengo que abrir este nuevo post porque el cerrado como solucionado esta tarde no lo estaba en realidad.

El problema es que tras completar un código para JVectorMaps incluí una un código con la función onRegionClick: function(event, code) para hacer que las regiones del mapa tuvieran un enlace a tal sección del sitio web.

Concretamente así:

Código:
$(document).ready (function() {
$('#map').vectorMap( {
    map: 'world',
    onRegionClick: function(event, code) {
        if (code === 'ZAN') {
            window.location = 'america'
        }
        else if (code === 'ZCA') {
            window.location = 'asia'
        }
        else if (code === 'ZNA') {
            window.location = 'africa'
        }
    }
});
});
Ahora, tras un problema, he tenido que sustituir el código principal por otro que no es compatible con el que veis.

Inicialmente, se encajaba de esta forma en el inicio del código:

Código:
/**
 * jVectorMap version 0.2.3
 *
 * Copyright 2011-2012, Kirill Lebedev
 * Licensed under the MIT license.
 *
 */
(function( $ ){
  var apiParams = {
        colors: 1,
        values: 1,
        backgroundColor: 1,
        scaleColors: 1,
        normalizeFunction: 1
      },
      apiEvents = {
        onLabelShow: 'labelShow',
        onRegionOver: 'regionOver',
        onRegionOut: 'regionOut',
        onRegionClick: 'regionClick',
        onMarkerLabelShow: 'markerLabelShow',
        onMarkerOver: 'markerOver',
        onMarkerOut: 'markerOut',
        onMarkerClick: 'markerClick'
      };
      
  $.fn.vectorMap = function(options) {
    var defaultParams = {
          map: 'world',
          color: '#6383d3',
          hoverColor: '#323637',
          onRegionClick: function(event, code) {
        if (code === 'ZNA') {
            window.location = 'america-del-norte'
        }
        else if (code === 'ZCA') {
            window.location = 'america-central'
        }
        else if (code === 'ZSA') {
             window.location = 'america-de-sur'
        }
        else if (code === 'ZEU') {
             window.location = 'europa'
        }     
        else if (code === 'ZAF') {
             window.location = 'africa'
        }  
        else if (code === 'ZOC') {
             window.location = 'oceania'
        }  
        else if (code === 'ZAS') {
             window.location = 'asia'
        }         
    },
Ahora, con el nuevo script no hay forma de meterlo y que funcione. Concretamente, podéis ver la "equivalencia" del que tengo ahora:

Código:
jvm.WorldMap.maps = {}, jvm.WorldMap.defaultParams = {
    map: "continentes",
    regionsSelectable: !1,
    markersSelectable: !1,
    bindTouchEvents: !0,
    regionStyle: {
        initial: {
            fill: "#6383d3",
            "fill-opacity": 1,
            stroke: "none",
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            fill: "#323637"
        },
        selected: {
            fill: "yellow"
        },
        selectedHover: {}
    },
    markerStyle: {
        initial: {
            fill: "grey",
            stroke: "#505050",
            "fill-opacity": 1,
            "stroke-width": 1,
            "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: "black",
            "stroke-width": 2
        },
        selected: {
            fill: "blue"
        },
        selectedHover: {}
    }
}, jvm.WorldMap.apiEvents = {
    onRegionLabelShow: "regionLabelShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerLabelShow: "markerLabelShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
};
Añado el script en otro archivo, me duplica el mapa.

Si queréis ver todo el invento en funcionamiento, podéis entrar en http://jsfiddle.net/3xZ28/117/

Ahora se trata de incluir el código a continuación para vincular las regiones del mapa.


Código:
$(document).ready (function() {
$('#map').vectorMap( {
    map: 'world',
    onRegionClick: function(event, code) {
        if (code === 'ZAN') {
            window.location = 'america'
        }
        else if (code === 'ZCA') {
            window.location = 'asia'
        }
        else if (code === 'ZNA') {
            window.location = 'africa'
        }
    }
});
});
Funciona si lo pones en otro archivo, como os digo, pero me duplica el mapa.

¿Alguno sabe cómo meter onRegionClick: function(event, code) en el script a continuación o en alguna forma que no presente este problema.

Código:
jvm.WorldMap.maps = {}, jvm.WorldMap.defaultParams = {
    map: "continentes",
    regionsSelectable: !1,
    markersSelectable: !1,
    bindTouchEvents: !0,
    regionStyle: {
        initial: {
            fill: "#6383d3",
            "fill-opacity": 1,
            stroke: "none",
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            fill: "#323637"
        },
        selected: {
            fill: "yellow"
        },
        selectedHover: {}
    },
    markerStyle: {
        initial: {
            fill: "grey",
            stroke: "#505050",
            "fill-opacity": 1,
            "stroke-width": 1,
            "stroke-opacity": 1,
            r: 5
        },
        hover: {
            stroke: "black",
            "stroke-width": 2
        },
        selected: {
            fill: "blue"
        },
        selectedHover: {}
    }
}, jvm.WorldMap.apiEvents = {
    onRegionLabelShow: "regionLabelShow",
    onRegionOver: "regionOver",
    onRegionOut: "regionOut",
    onRegionClick: "regionClick",
    onRegionSelected: "regionSelected",
    onMarkerLabelShow: "markerLabelShow",
    onMarkerOver: "markerOver",
    onMarkerOut: "markerOut",
    onMarkerClick: "markerClick",
    onMarkerSelected: "markerSelected",
    onViewportChange: "viewportChange"
};


Gracias.

Última edición por JUMASOL; 08/10/2013 a las 17:28