我正在使用amCharts的世界地图，当我降低高度时，地图会自动缩放到Nord America。有没有办法将地图的中心设置为欧洲而不是北美？我想在鼠标悬停时删除国家/地区名称。
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to https://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: https://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"projection": "mercator",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
},
{
"selectable": true,
"title": "Brussels",
"longitude": 4.2100,
"latitude": 50.5100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/brussels/"
},
{
"selectable": true,
"title": "Berlin",
"longitude": 13.2300,
"latitude": 52.3100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/berlin/"
},
{
"selectable": true,
"title": "Graz",
"longitude": 15.2600,
"latitude": 47.4000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/graz/"
},
{
"selectable": true,
"title": "Sofia (coming soon)",
"longitude": 23.33,
"latitude": 42.7000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Shanghai (coming soon)",
"longitude": 121.47472,
"latitude": 31.2286,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Salt Lake City (coming soon)",
"longitude": -111.5300,
"latitude": 40.4500,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Helsinki (coming soon)",
"longitude": 24.5615,
"latitude": 60.1015,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 2.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 400px;"></div>
</body>
</html>
答案 0 :(得分：3)
默认情况下，要将地图居中到地图的所需部分，您需要在dataProvider中设置zoomLatitude，zoomLongitude和zoomLevel属性的组合，以便缩放加载到所需的部分。世界地图是墨卡托校准的，因此您可以使用真实坐标来设置它们。对于您的情况，我选择了zoomLevel 2.5，并将zoomLatitude和zoomLongitude设置在波兰的某个区域，以便在我的演示中居中，但您可以随意调整它的使用。
至于禁用国家/地区翻转气球，您可以将getAreasFromMap设置为false（或删除dataProvider中的行），它会禁用各国的展期，因为它们不会自动定义。如果您希望在dataProvider数组中添加areas，可以选择性地启用它们。您必须将unlistedAreasAlpha和unlistedAreasOutlineAlpha设置为1，并将unlistedAreasColor和unlistedAreasOutlineColor设置为当前不再列出国家/地区的灰色。
总结代码：
AmCharts.makeChart("map", {
// ...
"dataProvider": {
"map": "worldLow",
// modify the default zoom
"zoomLevel": 2.5,
"zoomLongitude": 18.764648,
"zoomLatitude": 51.493241,
// ...
},
// ....
"areasSettings": {
// ...
// add color to unlisted areas since getAreasFromMap was removed from the dataProvider
"unlistedAreasColor": "rgba(129,129,129,1)",
"unlistedAreasOutlineColor": "rgba(80,80,80,1)",
// ...
},
// ...
});
演示如下：
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to https://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: https://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
AmCharts.makeChart("map", {
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"projection": "mercator",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"zoomLevel": 2.5,
"zoomLongitude": 18.764648,
"zoomLatitude": 51.493241,
"images": [{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}, {
"selectable": true,
"title": "Brussels",
"longitude": 4.2100,
"latitude": 50.5100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/brussels/"
}, {
"selectable": true,
"title": "Berlin",
"longitude": 13.2300,
"latitude": 52.3100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/berlin/"
}, {
"selectable": true,
"title": "Graz",
"longitude": 15.2600,
"latitude": 47.4000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/graz/"
}, {
"selectable": true,
"title": "Sofia (coming soon)",
"longitude": 23.33,
"latitude": 42.7000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}, {
"selectable": true,
"title": "Shanghai (coming soon)",
"longitude": 121.47472,
"latitude": 31.2286,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}, {
"selectable": true,
"title": "Salt Lake City (coming soon)",
"longitude": -111.5300,
"latitude": 40.4500,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}, {
"selectable": true,
"title": "Helsinki (coming soon)",
"longitude": 24.5615,
"latitude": 60.1015,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"unlistedAreasColor": "rgba(129,129,129,1)",
"unlistedAreasOutlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 2.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 400px;"></div>
</body>
</html>
答案 1 :(得分：-1)
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to https://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: https://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
map= AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"projection": "mercator",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
},
{
"selectable": true,
"title": "Brussels",
"longitude": 4.2100,
"latitude": 50.5100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/brussels/"
},
{
"selectable": true,
"title": "Berlin",
"longitude": 13.2300,
"latitude": 52.3100,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/berlin/"
},
{
"selectable": true,
"title": "Graz",
"longitude": 15.2600,
"latitude": 47.4000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1,
"url": "https://blockchainhub.net/graz/"
},
{
"selectable": true,
"title": "Sofia (coming soon)",
"longitude": 23.33,
"latitude": 42.7000,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Shanghai (coming soon)",
"longitude": 121.47472,
"latitude": 31.2286,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Salt Lake City (coming soon)",
"longitude": -111.5300,
"latitude": 40.4500,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
},
{
"selectable": true,
"title": "Helsinki (coming soon)",
"longitude": 24.5615,
"latitude": 60.1015,
"svgPath": targetSVG,
"color": "#ff1d51",
"scale": 1
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"showDescriptionOnHover":"false",
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 2.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
map.dataProvider.zoomLatitude = "54.5260";
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 400px;"></div>
</body>
</html>