4

私は現在JvectorMapを使用しており、テキストにカーソルを合わせると複数の国を強調表示しようとしています。アフリカという単語にカーソルを合わせると、マップ全体が強調表示されるようになりました。アフリカのコンテンツ名にカーソルを合わせています。

現在、私は a を使用して大陸のリストを作成しており、色が割り当てられたすべての国コード (ZA、US) を含む をjQuery.each返しています...次のことを試しました:continentCodes

jQuery('.continentLink').hover(function() {
 jQuery.each(mapObject.mapData.paths, function(i, val) {
  if (val.continent == "africa"){
   continentCodes[i] = "#3e9d01";
   mapObject.series.regions[0].setValues(continentCodes);
  }
 });
});

しかし、その後、各ステートメントを繰り返していますが、動的な大陸を取得できません。

ここにJSFIDDLEがあります

JSは次のとおりです。

jQuery(function(){
//JSON MARKERS
var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'},
    {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}];
//JSON MARKERS  

//JSON STYLING
var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}};
var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}};
//JSON STYLING

//GLOBAL VARIABLES
var countryList = "", continentList = "";
var continentCodes = {};
//GLOBAL VARIABLES

//INIT MAP PLUGIN
jQuery('#world-map').vectorMap({
    map: 'world_mill_en',
    normalizeFunction: 'polynomial',
    markerStyle:markerStyle,
    regionStyle:regionStyling,
    backgroundColor: '#383f47',
    series: {regions: [{values: {},attribute: 'fill'}]},
    markers: markers,
    onRegionClick:function (event, code){
        jQuery('#world-map').vectorMap('set', 'focus', code);
    },
    onMarkerClick: function(events, index){
        jQuery('#infobox').html(markers[index].name);
    }
});
//INIT MAP PLUGIN

var mapObject  = jQuery('#world-map').vectorMap('get', 'mapObject');

//LIST COUNTRIES & CONTINENTS
function createList() {

    //Get list
    jQuery.each(mapObject.mapData.paths, function(i, val) {
        countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>';
        continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>';

        continentCodes[i] = "#3e9d01";
        return continentCodes;
    });
    //display continents
    jQuery('#continentList').html(continentList);

    //display countries
    jQuery('#countryList').html(countryList);

    //Create Hover Function
    jQuery('.continentLink').hover(function() {
        mapObject.series.regions[0].setValues(continentCodes);
        console.log(continentCodes);
    });

    //Create ZOOM Function
    jQuery('.countryLink').click(function(e) {
        jQuery('#world-map').vectorMap('set', 'focus', this.id);
    });
}

createList();
});

そしてHTML：

  <div id="world-map" style="width: 960px; height: 400px"></div>
    <div id="infobox"></div>
        <ul id="continentList"></ul>
        <ul id="countryList"></ul>
4

1 に答える 1

2

コードを再構築しました。JSFIDDLEを参照してください。修正された JavaScript は次のとおりです。

jQuery(function(){
//JSON MARKERS
var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'},
    {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}];
//JSON MARKERS  

//JSON STYLING
var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}};
var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}};
//JSON STYLING

//GLOBAL VARIABLES
var countryList = "", continentList = "";
var resultsDup = {};
var continentCodes = {};
//GLOBAL VARIABLES

//INIT MAP PLUGIN
jQuery('#world-map').vectorMap({
    map: 'world_mill_en',
    normalizeFunction: 'polynomial',
    markerStyle:markerStyle,
    regionStyle:regionStyling,
    backgroundColor: '#383f47',
    series: {regions: [{values: {},attribute: 'fill'}]},
    markers: markers,
    onRegionClick:function (event, code){
        jQuery('#world-map').vectorMap('set', 'focus', code);
    },
    onMarkerClick: function(events, index){
        jQuery('#infobox').html(markers[index].name);
    }
});
//INIT MAP PLUGIN

var mapObject  = jQuery('#world-map').vectorMap('get', 'mapObject');

//LIST COUNTRIES & CONTINENTS
jQuery.each(mapObject.mapData.paths, function(i, val) {

    countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>';

    //remove duplicate continents
    var resultsList = val.continent;
    if (resultsDup[resultsList]) {
        jQuery(this).remove();
    }else{
        resultsDup[resultsList] = true;
        continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>';
    }
    //remove duplicate continents


});
//display countries
jQuery('#countryList').html(countryList);

//display continents
jQuery('#continentList').html(continentList);

var continentId =""
function getID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#3e9d01";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

function removeGetID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#128da7";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

//LIST COUNTRIES & CONTINENTS TEMP
jQuery('.continentLink').hover(function(e) {
    continentId = this.id;
    getID(continentId);
}, function(){
    removeGetID(continentId);
});

//Zoom to Country Function
jQuery('.countryLink').click(function(e) {
    jQuery('#world-map').vectorMap('set', 'focus', this.id);
});

//Continent Hover function

});

お楽しみください :D

于 2013-04-25T14:19:29.303 に答える