点击中国地图显示中国详细地图 并带标注 区域样式
var markers;
var values1;
var values2;
var values3;
$(function(){
var map,
markerIndex = 0,
markersCoords = {};
//标注
markers=[
[61.18, -149.53],
[21.18, -157.49],
{latLng: [41.90, 12.45], name: 'Vatican City'},
{latLng: [40,116], name: 'beijing'},
{latLng: [139,35], name: 'zhengzhou'}
];
values1 = [408, 512, 550, 781];
values2 = [1, 2, 3, 4];
values3 = { '4': 'bank', '5': 'factory'};
//含多级地图用MultiMap 如果只有一级用map
map=new jvm.MultiMap({
//将地图放到对应的div中
container: $('#map1'),
//最大级数(地图层数0为一层,1为二层)
maxLevel: 1,
//主地图
main: {
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
backgroundColor:"#679EE3",
markerStyle: {
initial: {
fill: '#DCDC10',
stroke: '#383f47'
}
},
markers:markers,
regionsSelectable: true,
regionStyle:{
initial: {
fill: '#F5E3A2',
"fill-opacity": 1
},
hover: {
"fill-opacity": 0.8,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
regionLabelStyle:{
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'white'
},
hover: {
cursor: 'pointer'
}
},
series: {
markers: [{
// attribute: 'fill',
// scale: ['#C8EEFF', '#0071A4'],
// normalizeFunction: 'polynomial',
// values: values1,
// legend: {
// vertical: true
// }
}],
regions: [{
scale: ['#7CC57C', '#white'],
normalizeFunction: 'polynomial'
}]
},
markersSelectable:true,
onMarkerTipShow: function(e, tip, code){
map.maps.world_mill_en.tip.text(markersCoords[code].lat.toFixed(2)+' '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.maps.world_mill_en.removeMarkers([code]);
map.maps.world_mill_en.tip.hide();
}
},
//根据url找到相关地图
mapUrlByCode: function(code, multiMap){
if(code == 'US' || code == 'CN'){
// multiMap.map.addMarkers(markers);
multiMap.backgroundColor="blue";
return 'assets/jquery-jvectormap-'+code.toLowerCase()+ '-' + multiMap.defaultProjection + '-en.js';
}else{
$('#map1').click(function(e){
var a=map;
// alert(JSON.stringify(a.params));
var x = e.pageX - multiMap.params.container.offset().left,
y = e.pageY - multiMap.params.container.offset().top,
latLng = multiMap.maps.world_mill_en.pointToLatLng(x, y),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || targetCls.indexOf('jvectormap-marker') === -1)) {
markersCoords[markerIndex] = latLng;
multiMap.maps.world_mill_en.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
$('#map1').bind('');
return false;
}
}
/*
//根据name找到相关地图
mapNameByCode:function(code,multimap){
// return code.toLowerCase()+'_'+ multiMap.defaultProjection+'_en';
return 'cn_mill_en';
}
*/
});
// map.addMarkers(markers,[values1,values2,values3]);
});
2.如果需要设置2级地图样式、标注等需要修改multimap.js文件对应代码修改为:
that.addMap(name, {map: name,backgroundColor:"#679EE3",markerStyle: {
initial: {
fill: '#DCDC10',
stroke: '#383f47'
}
},
markers:markers,
regionStyle:{
initial: {
fill: '#F5E3A2',
"fill-opacity": 1
},
hover: {
"fill-opacity": 0.8,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},multiMapLevel: currentMap.params.multiMapLevel + 1});