因此，我正在tumblr上做一个个人项目，我想用城市标记制作一张世界地图。我希望标记在单击时打开一个弹出窗口，并根据单击的城市提供信息。我发现amCharts可以为此准备一些现成的东西，但是我是一个完全的初学者，需要就如何实现这一点进行指导。我正在使用this来轻松获得城市标记，并且发现了this tutorial关于如何检索被点击项目的信息。但我不知道如何使信息在弹出窗口中打开。他们有一个关于弹出窗口的教程，但并没有真正说明如何实现此功能。另外，我似乎无法真正点击城市标记，只能点击国家/地区，这也是我也想做到的。当我预览地图时，它会正确显示国家名称，但是当我保存页面时，将鼠标悬停在它们上时不会显示国家名称，因此我需要对此进行修复。
这是我到目前为止所拥有的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="http://static.tumblr.com/bfthosw/vUynczxut/intro-black-64.css" rel="stylesheet">
<!---- Travelmap #1 by Sofi (castiiel.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lato:300,400:latin','Montserrat:700:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf,s);
})(); </script>
<style type="text/css">
body {
background-image: url('http://i.imgur.com/rYsfgEL.png'); /*put the url of your background image between '',if any */
background-attachment: fixed;
}
#map {
position: fixed;
top:50%;
margin-top:-251px;
width:810px;
height:455px;
left:50%;
margin-left:-416px;
background:#27222A; /*Here change the map background color*/
padding:10px 0px 16px 10px;
border:3px solid #bbb; /*Here change the inside border color*/
outline:3px solid #27222A; /*Here change the outline color. Better if it match the map background*/
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
border-radius: 1px;
background-color: #aaa;
}
::-webkit-scrollbar-thumb {
border-radius: 1px;
background-color: #444;
}
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 350px;
}
#title {
width:752px;
position: fixed;
left:50%;
margin-left:-376px;
top: 50%;
margin-top:-300px;
text-align:center;
font-family: 'montserrat','intro',sans-serif;
font-size: 40px;
text-transform: uppercase;
font-weight:700;
letter-spacing:2px;
color:#ddd; /*Here change the title color*/
}
#links {
width:752px;
position: fixed;
left:50%;
margin-left:-376px;
top: 50%;
margin-top:260px;
text-align:center;
}
#links a {
font-family:trebuchet ms,sans-serif;
text-transform:uppercase;
padding:5px 8px;
display: inline;
font-size:10px;
letter-spacing:1.3px;
margin:0px 10px;
text-decoration:none;
color:#eee; /*Here change the links text color*/
font-weight:bolder;
background:#27222A; /*Here change the links background color*/
border:2px solid #aaa; /*Here change the links inside border color*/
border-radius: 4px 4px 4px 4px;
}
</style></head>
<body>
<div id="title">MAP</div>
<div id="map">
<!-- Styles -->
<style>
#chartdiv {
width: 800px;
height: 450px;
overflow: hidden;
}
.map-marker {
/* adjusting for the marker dimensions
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;
box-sizing: border-box;
}
.map-marker.map-clickable {
cursor: pointer;
}
.pulse {
width: 10px;
height: 10px;
border: 5px solid #f7f14c;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #716f42;
z-index: 10;
position: absolute;
box-sizing: border-box;
}
.map-marker .dot {
border: 10px solid #fff601;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -20px;
left: -20px;
z-index: 1;
opacity: 0;
box-sizing: border-box;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_dataviz);
am4core.useTheme(am4themes_animated);
// Themes end
// Create map instance
var chart = am4core.create("chartdiv",am4maps.Mapchart);
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Exclude Antartica
polygonSeries.exclude = ["AQ"];
// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;
// Add some custom data
polygonSeries.data = [{
"id": "US","color": am4core.color("#3F4B3B"),"description": "The U.S. is a country of 50 states covering a vast swath of North America,with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York,a global finance and culture center,and capital Washington,DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast,Los Angeles' Hollywood is famed for filmmaking."
},{
"id": "CA","description": "Canada is a North American country stretching from the U.S. in the south to the Arctic Circle in the north. Major cities include massive Toronto,west coast film centre Vancouver,French-speaking Montréal and Québec City,and capital city Ottawa. Canada's vast swaths of wilderness include lake-filled Banff National Park in the Rocky Mountains. It's also home to Niagara Falls,a famous group of massive waterfalls."
},{
"id": "MX","description": "Mexico is a country between the U.S. and Central America that's known for its Pacific and Gulf of Mexico beaches and its diverse landscape of mountains,deserts and jungles. Ancient ruins such as Teotihuacán and the Mayan city of Chichén Itzá are scattered throughout the country,as are Spanish colonial-era towns. In capital Mexico City,upscale shops,renowned museums and gourmet restaurants cater to modern life."
}]
// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#5CAB7D");
polygonTemplate.propertyFields.fill = "color";
polygonTemplate.events.on("hit",function(ev) {
var data = ev.target.dataItem.dataContext;
var info = document.getElementById("info");
info.innerHTML = "<h3>" + data.name + " (" + data.id + ")</h3>";
if (data.description) {
info.innerHTML += data.description;
}
else {
info.innerHTML += "<i>No description provided.</i>"
}
});
// Add image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.mapImages.template.propertyFields.longitude = "longitude";
imageSeries.mapImages.template.propertyFields.latitude = "latitude";
imageSeries.data = [ {
"title": "Brussels","latitude": 50.8371,"longitude": 4.3676
},{
"title": "Copenhagen","latitude": 55.6763,"longitude": 12.5681
},{
"title": "Paris","latitude": 48.8567,"longitude": 2.3510
},{
"title": "Reykjavik","latitude": 64.1353,"longitude": -21.8952
},{
"title": "Moscow","latitude": 55.7558,"longitude": 37.6176
},{
"title": "Madrid","latitude": 40.4167,"longitude": -3.7033
},{
"title": "London","latitude": 51.5002,"longitude": -0.1262,"url": "http://www.google.co.uk"
},{
"title": "Peking","latitude": 39.9056,"longitude": 116.3958
},{
"title": "New Delhi","latitude": 28.6353,"longitude": 77.2250
},{
"title": "Tokyo","latitude": 35.6785,"longitude": 139.6823,"url": ""
},{
"title": "Ankara","latitude": 39.9439,"longitude": 32.8560
},{
"title": "Buenos Aires","latitude": -34.6118,"longitude": -58.4173
},{
"title": "Brasilia","latitude": -15.7801,"longitude": -47.9292
},{
"title": "Ottawa","latitude": 45.4235,"longitude": -75.6979
},{
"title": "Washington","latitude": 38.8921,"longitude": -77.0241
},{
"title": "Kinshasa","latitude": -4.3369,"longitude": 15.3271
},{
"title": "Cairo","latitude": 30.0571,"longitude": 31.2272
},{
"title": "Pretoria","latitude": -25.7463,"longitude": 28.1876
} ];
// add events to recalculate map position when the map is moved or zoomed
chart.events.on( "ready",updateCustomMarkers );
chart.events.on( "mappositionchanged",updateCustomMarkers );
// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers( event ) {
// go through all of the images
imageSeries.mapImages.each(function(image) {
// check if it has corresponding HTML element
if (!image.dummyData || !image.dummyData.externalElement) {
// create onex
image.dummyData = {
externalElement: createCustomMarker(image)
};
}
// reposition the element accoridng to coordinates
var xy = chart.geoPointToSVG( { longitude: image.longitude,latitude: image.latitude } );
image.dummyData.externalElement.style.top = xy.y + 'px';
image.dummyData.externalElement.style.left = xy.x + 'px';
});
}
// this function creates and returns a new marker element
function createCustomMarker( image ) {
var chart = image.dataItem.component.chart;
// create holder
var holder = document.createElement( 'div' );
holder.classname = 'map-marker';
holder.title = image.dataItem.dataContext.title;
holder.style.position = 'absolute';
// maybe add a link to it?
if ( undefined != image.url ) {
holder.onclick = function() {
window.location.href = image.url;
};
holder.classname += ' map-clickable';
}
// create dot
var dot = document.createElement( 'div' );
dot.classname = 'dot';
holder.appendChild( dot );
// create pulse
var pulse = document.createElement( 'div' );
pulse.classname = 'pulse';
holder.appendChild( pulse );
// append the marker to the map container
chart.svgContainer.htmlElement.appendChild( holder );
return holder;
}
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
<div id="container">
<div id="info"></div>
<div id="links">
<a href="/">home</a>
<a href="/ask">message</a>
<a href="/faq">faq</a>
<a href="/characters">characters</a>
<!--Don't delete this. If you do,I'm gonna directly report you for code stealing and your blog will get deleted. If you don't want a credit link and you can,build your own code. -->
<a href="http://castiiel.tumblr.com">credit</a>
</div></div>
</body></html>