amCharts中心图
amCharts中心图
提问于 2016-10-20 19:07:21
我使用的是amCharts的世界地图，当我降低高度时，地图会自动缩放到北美。有没有办法把地图的中心设在欧洲而不是北美？我想删除鼠标悬停时的国家名称。
<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>amCharts接口here。
回答 2
Stack Overflow用户
发布于 2016-10-22 02:55:15
要在默认情况下将地图居中到地图的所需部分，需要在dataProvider中设置zoomLatitude、zoomLongitude和zoomLevel属性的组合，以便在加载时缩放到所需的部分。世界地图是墨卡托校准的，因此您可以使用真实坐标来设置它们。对于您的情况，我选择了2.5的zoomLevel，并将zoomLatitude和zoomLongitude设置为波兰的一个区域，以便在我的演示中居中，但可以根据您的使用情况进一步调整它。
至于禁用国家/地区翻转气球，您可以将getAreasFromMap设置为false (或删除dataProvider中的行)，它将禁用国家/地区的翻转，因为它们不会被自动定义。如果您愿意，可以在areas阵列中通过将它们添加到dataProvider中来有选择地启用它们。您必须将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>
Stack Overflow用户
发布于 2016-10-20 20:31:10
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40152700
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号