我最近从amcharts.com下载了一个模板代码，以便我可以在我的网站上放置一张地图。代码在我设置纬度和经度的任何位置放置了很少的脉动点，我还可以为每个点包含一个标题。但是，每当我尝试添加另一个参数（如URL）时，我都会收到错误消息。在这一点上，我试图使它鼠标悬停在每个点上将创建该位置的弹出图像。我无法弄清楚如何让弹出窗口工作，并确保每个点都有不同的弹出窗口图像。这是我一直在使用的codepen的链接。
https://codepen.io/ZoeyEllen/pen/yvXvZX?editors=1111
我已经完成了相当多的谷歌搜索，我已经找到了几个不同的javascript，html和css建议，但我尝试过的任何东西似乎都没有用。这是我到目前为止的代码：
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "mercator",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 5,
"selectedScale": 5,
"selectedColor": "#089282",
"color": "#13564e"
},
"areasSettings": {
"unlistedAreasColor": "#15A892"
},
"dataProvider": {
"map": "worldLow",
"images": [ {
"zoomLevel": 5,
"scale": 0.5,
"title": "Hawaii, USA",
"latitude": 19.8968,
"longitude": -155.5828
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Galápagos Islands",
"latitude": -0.8675,
"longitude": -89.4364
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Italy",
"latitude": 41.9028,
"longitude": 12.4964
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Greece",
"latitude": 37.9838,
"longitude": 23.7275
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "The Bahamas",
"latitude": 24.9314,
"longitude": -76.1900
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "South Florida, USA",
"latitude": 26.1224,
"longitude": -80.1373
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Canada",
"latitude": 45.5017,
"longitude": -73.5673
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington State, USA",
"latitude": 47.6062,
"longitude": -122.3321
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "California, USA",
"latitude": 34.0522,
"longitude": -118.2437
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Illinois, USA",
"latitude": 41.8781,
"longitude": -87.6298
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Costa Rica",
"latitude": 9.7489,
"longitude": -83.7534
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "North Carolina, USA",
"latitude": 35.7596,
"longitude": -79.0193
} ]
}
} );
// add events to recalculate map position when the map is moved or zoomed
map.addListener( "positionChanged", updateCustomMarkers );
// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers( event ) {
// get map object
var map = event.chart;
// go through all of the images
for ( var x in map.dataProvider.images ) {
// get MapImage object
var image = map.dataProvider.images[ x ];
// check if it has corresponding HTML element
if ( 'undefined' == typeof image.externalElement )
image.externalElement = createCustomMarker( image );
// reposition the element accoridng to coordinates
var xy = map.coordinatesToStageXY( image.longitude, image.latitude );
image.externalElement.style.top = xy.y + 'px';
image.externalElement.style.left = xy.x + 'px';
}
}
// this function creates and returns a new marker element
function createCustomMarker( image ) {
// create holder
var holder = document.createElement( 'div' );
holder.className = 'map-marker';
holder.title = image.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
image.chart.chartDiv.appendChild( holder );
holder.onmouseover = function(){
console.log(image.title);
}
return holder;
}#chartdiv {
width: 100%;
height: 500px;
}
.map-marker {
/* adjusting for the marker dimensions
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;
}
.map-marker.map-clickable {
cursor: pointer;
}
.pulse {
width: 10px;
height: 10px;
border: 3px solid #FFB6C1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #ff69b4;
z-index: 10;
position: absolute;
}
.map-marker .dot {
border: 3px solid #ff69b4;
background: transparent;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
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;
}
@-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><script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
答案 0 :(得分：0)
好的，所以我希望这就是你要找的东西。我添加了弹出窗口以显示在地图中心。您可以为弹出窗口添加yor css，但这会说明您想要的内容。
<强>解释
HTML
在HTML的底部添加了每个弹出窗口<div>。它们具有在图像对象中引用其类popup的个别值，以提供您想要的样式
<div id="pop0" class="popup">A</div>
CSS
添加了两个分词
弹出窗口：将弹出窗口整体设置为
.popup { display：none; 位置：绝对; 顶部：0; 底部：0; 右：0; 左：0; 保证金：自动; 背景：红色; 宽度：50px; 身高：50px; }
popon：用听众打开弹出窗口
.popon { 显示：块; }
JS
在这里添加了两个不同的东西
首先，我在每个元素中添加pop值，以引用每个点所需弹出窗口的id
其次我添加了两个事件监听器
MouseOver - 这会将类popon添加到点的弹出元素
holder.onmouseover = function（）{ popup.classList.add（ 'POPON'）; }
MouseLeave - 这会将类popon移除到点的弹出元素
holder.onmouseleave = function（）{ popup.classList.remove（ 'POPON'）; }
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"projection": "mercator",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 5,
"selectedScale": 5,
"selectedColor": "#089282",
"color": "#13564e"
},
"areasSettings": {
"unlistedAreasColor": "#15A892"
},
"dataProvider": {
"map": "worldLow",
"images": [{
"zoomLevel": 5,
"scale": 0.5,
"title": "Hawaii, USA",
"latitude": 19.8968,
"longitude": -155.5828,
"pop": "pop0"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Galápagos Islands",
"latitude": -0.8675,
"longitude": -89.4364,
"pop": "pop1"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Italy",
"latitude": 41.9028,
"longitude": 12.4964,
"pop": "pop2"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Greece",
"latitude": 37.9838,
"longitude": 23.7275,
"pop": "pop3"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "The Bahamas",
"latitude": 24.9314,
"longitude": -76.1900,
"pop": "pop4"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "South Florida, USA",
"latitude": 26.1224,
"longitude": -80.1373,
"pop": "pop5"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Canada",
"latitude": 45.5017,
"longitude": -73.5673,
"pop": "pop6"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington State, USA",
"latitude": 47.6062,
"longitude": -122.3321,
"pop": "pop7"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "California, USA",
"latitude": 34.0522,
"longitude": -118.2437,
"pop": "pop8"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Illinois, USA",
"latitude": 41.8781,
"longitude": -87.6298,
"pop": "pop9"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Costa Rica",
"latitude": 9.7489,
"longitude": -83.7534,
"pop": "pop10"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "North Carolina, USA",
"latitude": 35.7596,
"longitude": -79.0193,
"pop": "pop11"
}]
}
});
// add events to recalculate map position when the map is moved or zoomed
map.addListener("positionChanged", updateCustomMarkers);
// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers(event) {
// get map object
var map = event.chart;
// go through all of the images
for (var x in map.dataProvider.images) {
// get MapImage object
var image = map.dataProvider.images[x];
// check if it has corresponding HTML element
if ('undefined' == typeof image.externalElement)
image.externalElement = createCustomMarker(image);
// reposition the element accoridng to coordinates
var xy = map.coordinatesToStageXY(image.longitude, image.latitude);
image.externalElement.style.top = xy.y + 'px';
image.externalElement.style.left = xy.x + 'px';
}
}
// this function creates and returns a new marker element
function createCustomMarker(image) {
// create holder
var holder = document.createElement('div');
holder.className = 'map-marker';
holder.title = image.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
image.chart.chartDiv.appendChild(holder);
//Mouseover listener
var popup = document.getElementById(image.pop);
holder.onmouseover = function() {
popup.classList.add('popon');
}
holder.onmouseleave = function() {
popup.classList.remove('popon');
}
return holder;
} #chartdiv {
width: 100%;
height: 500px;
}
.map-marker {
/* adjusting for the marker dimensions
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;
}
.map-marker.map-clickable {
cursor: pointer;
}
.pulse {
width: 10px;
height: 10px;
border: 3px solid #FFB6C1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #ff69b4;
z-index: 10;
position: absolute;
}
.map-marker .dot {
border: 3px solid #ff69b4;
background: transparent;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
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;
}
.popup {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background: red;
width: 50px;
height: 50px;
}
.popon {
display: block;
}
@-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;
}<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="pop0" class="popup">A</div>
<div id="pop1" class="popup">B</div>
<div id="pop2" class="popup">C</div>
<div id="pop3" class="popup">D</div>
<div id="pop4" class="popup">E</div>
<div id="pop5" class="popup">F</div>
<div id="pop6" class="popup">G</div>
<div id="pop7" class="popup">H</div>
<div id="pop8" class="popup">I</div>
<div id="pop9" class="popup">J</div>
<div id="pop10" class="popup">K</div>
<div id="pop11" class="popup">L</div>