我正在创建一个 personal blog site .我偶然发现了一个交互式访问状态 map ,我想在我的一个 html 页面中实现它。我能够使用他们提供的生成的 html 成功地将它放在我的网站上。但是,我想稍微调整一下,但我对 javascript 并不熟悉。
我想补充两点:
第 1 步:将选定的状态链接到特定的 html 页面。 第二(可选):单击未突出显示(已访问)的状态时禁用缩放和颜色更改。
这是我目前的代码:
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
{
"id": "US-AZ",
"showAsSelected": true
},
{
"id": "US-CA",
"showAsSelected": true
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>
最佳答案
您可以添加 url
属性到您想要链接到的状态。您还可以设置 urlTarget
"_blank"
如果你想让链接在新标签页/窗口中打开:
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
// ... etc
我还建议设置 autoZoom
假和selectable
在 areasSettings
中设置为 true,这样 map 就不会在触发 URL 之前尝试缩放:
areasSettings: {
autoZoom: false,
selectable: true,
要禁用其他状态的缩放和颜色更改,只需从 dataProvider
中删除 getAreasFromMap: true
。
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor: "#FFFFFF",
backgroundAlpha: 1,
zoomControl: {
zoomControlEnabled: false
},
dataProvider: {
map: "usaHigh",
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings: {
autoZoom: false,
selectable: true,
color: "#B4B4B7",
colorSolid: "#DB4646",
selectedColor: "#DB4646",
outlineColor: "#666666",
rollOverColor: "#9EC2F7",
rollOverOutlineColor: "#000000"
}
});
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
关于javascript - amcharts 交互式 map : making selected states a clickable link,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49307377/