FusionMaps XT如何在地图区域上添加各种图标或图片标记

作者：控件中国网出处：控件中国网 2015-11-19 16:28:19 阅读：4

FusionMaps XT是包含在 FusionCharts Suite XT里的一款JavaScript地图控件，通过该控件开发人员可以开发交互式地地图Web应用程序和数据可视化程序，这篇文章主要介绍在地图控件中经常会用到的地图区域标记，也就是说利用FusionMaps XT提供的地图标记功能可以在地图重要区域上添加一些醒目的图标、图片标记等，控件也提供了一些内嵌的图标可以供开发人员使用，当然开发人员也可以使用自定义图标或者图片，具体用法如下：

1.使用一些内嵌的简单图标来进行地图标记

{

"chart": {

"caption": "Top 5 Busiest Airports in the World",

"subcaption": "Based on Passenger Traffic",

"theme": "fint",

"markerBgColor": "#FF0000",

"markerRadius": "10",

"showMarkerLabels": "1",

"entityFillColor": "#A8A8A8",

"entityFillHoverColor": "#E5E5E9"

"markers": {

"items": [

{

"id": "lon",

"shapeid": "triangle",

"x": "340.23",

"y": "125.9",

"label": "LHR",

"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",

"labelpos": "left"

{

"id": "alt",

"shapeid": "triangle",

"x": "160.14",

"y": "164.9",

"label": "ATL",

"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",

"labelpos": "bottom"

{

"id": "dub",

"shapeid": "triangle",

"x": "458.14",

"y": "203.9",

"label": "DXB",

"tooltext": "Dubai International Airport {br} IACL Code : OMDB",

"labelpos": "bottom"

{

"id": "tok",

"shapeid": "triangle",

"x": "628.14",

"y": "165.9",

"label": "HND",

"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",

"labelpos": "bottom"

{

"id": "beij",

"shapeid": "triangle",

"x": "573.14",

"y": "161.9",

"label": "PEK",

"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",

"labelpos": "bottom"

}

]

}

2.使用图片或者图标来进行地图区域的标记，下面的事例就是采用自定义图片来进行标记

{

"chart": {

"caption": "Top 5 Airports in the World",

"subcaption": "Based on Passenger Traffic",

"theme": "fint",

"showMarkerLabels": "1",

"entityFillColor": "#A8A8A8",

"entityFillHoverColor": "#E5E5E9"

"markers": {

"shapes": [

{

"id": "myCustomShape",

"type": "image",

"url": "http://static.fusioncharts.com/docs/assets/airplane-99047_150.png",

"xscale": "15",

"yscale": "15",

"labelPadding": "15"

}

"items": [

{

"id": "lon",

"shapeid": "myCustomShape",

"x": "340.23",

"y": "125.9",

"label": "LHR",

"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",

"labelpos": "left"

{

"id": "was",

"shapeid": "myCustomShape",

"x": "160.14",

"y": "164.9",

"label": "ATL",

"tooltext": "Hartsfield Jackson Atlanta International Airport {br}IACL Code : KATL",

"labelpos": "bottom"

{

"id": "dub",

"shapeid": "myCustomShape",

"x": "458.14",

"y": "203.9",

"label": "DXB",

"tooltext": "Dubai International Airport {br} IACL Code : OMDB",

"labelpos": "bottom"

{

"id": "tok",

"shapeid": "myCustomShape",

"x": "628.14",

"y": "165.9",

"label": "HND",

"tooltext": "Tokyo Haneda Airport{br} IACL Code : RJTT",

"labelpos": "bottom"

{

"id": "beij",

"shapeid": "myCustomShape",

"x": "573.14",

"y": "161.9",

"tooltext": "Beijing Capital International Airport {br} IACL Code : ZBAA",

"labelpos": "bottom"

}

]

}

3.对于标记的图标，开发人员还可以进行连线

{

"chart": {

"caption": "Busiest Routes from Heathrow Airport",

"subcaption": "2014",

"theme": "fint",

"markerBgColor": "#FF0000",

"markerRadius": "10",

"showMarkerLabels": "1",

"connectorColor": "#0CB2B0",

"connectorHoverColor": "#339933",

"entityFillColor": "#CECED2",

"entityFillHoverColor": "#E5E5E9"

"markers": {

"items": [

{

"id": "lon",

"shapeid": "triangle",

"x": "340.23",

"y": "125.9",

"label": "LHR",

"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",

"labelpos": "left"

{

"id": "nyc",

"shapeid": "triangle",

"x": "178.14",

"y": "154.9",

"label": "JFK",

"tooltext": "John F Kennedy Airport {br}IACL Code : KJFK",

"labelpos": "bottom"

{

"id": "dub",

"shapeid": "triangle",

"x": "458.14",

"y": "203.9",

"label": "DXB",

"tooltext": "Dubai International Airport {br} IACL Code : OMDB",

"labelpos": "bottom"

{

"id": "sg",

"shapeid": "triangle",

"x": "558.14",

"y": "255.9",

"label": "SIN",

"tooltext": "Singapore International Airport {br} IACL Code : WSSS",

"labelpos": "bottom"

{

"id": "hk",

"shapeid": "triangle",

"x": "573.14",

"y": "202.9",

"label": "HKG",

"tooltext": "Hong Kong International Airport {br} IACL Code : VHHH",

"labelpos": "bottom"

}

"connectors": [

{

"from": "lon",

"to": "hk",

"tooltext": "London to Hong Kong{br} Total Passengers: 1,801,520"

{

"from": "lon",

"to": "sg",

"tooltext": "London to Singapore{br} Total Passengers: 1,507,032"

{

"from": "lon",

"to": "nyc",

"tooltext": "London to New York{br} Total Passengers: 2,551,276"

{

"from": "lon",

"to": "dub",

"tooltext": "London to Dubai{br} Total Passengers: 1,974,078"

}

]

}

功能分类