将balloonText(工具提示)添加到自定义标记

Question

我在这里使用Amcharts中自定义html标记的示例:http://www.amcharts.com/demos/custom-html-elements-map-markers/(点击编辑时有一个jsfiddle可用)

我在添加工具提示时遇到了麻烦(显然在amCharts中称为balloonText)，我尝试通过这种方式向imagesSettings添加balloonText属性:

imagesSettings: {
        rollOverColor: "#089282",
        rollOverScale: 3,
        selectedScale: 3,
        selectedColor: "#089282",
        color: "#13564e",
        balloonText: "[[title]]"
    },

我也尝试用同样的方式设置每个图像的balloonText。

在绝望中，我还尝试了bootstrap的数据切换工具提示在标记上，但无济于事。

也许我错过了一些简单的东西?有什么办法可以做到吗?

提前感谢!

Answer 1

这个演示有点粗糙。脉动标记不是amMap的一部分，而是放置在地图区域上方的HTML元素。因为它们不是地图对象，所以它们不显示与地图相关的工具提示。

然而，由于它们是常规的HTML元素，您可以轻松地将Bootstrap(或任何其他插件)工具提示附加到它们上。例如:

$(holder).tooltip({});

下面是启用了Bootstrap工具提示的相同演示:

/**
 * This example uses pulsating circles CSS by Kevin Urrutia
 * http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle
 */
var map = AmCharts.makeChart("chartdiv", {
    type: "map",
    "theme": "light",
    path: "http://www.amcharts.com/lib/3/",
    imagesSettings: {
        rollOverColor: "#089282",
        rollOverScale: 3,
        selectedScale: 3,
        selectedColor: "#089282",
        color: "#13564e"
    },
    zoomControl: {
        buttonFillColor: "#15A892"
    },
    areasSettings: {
        unlistedAreasColor: "#15A892"
    },
    dataProvider: {
        map: "worldLow",
        images: [{
            zoomLevel: 5,
            scale: 0.5,
            title: "Brussels",
            latitude: 50.8371,
            longitude: 4.3676
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Copenhagen",
            latitude: 55.6763,
            longitude: 12.5681
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Paris",
            latitude: 48.8567,
            longitude: 2.3510
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Reykjavik",
            latitude: 64.1353,
            longitude: -21.8952
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Moscow",
            latitude: 55.7558,
            longitude: 37.6176
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Madrid",
            latitude: 40.4167,
            longitude: -3.7033
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "London",
            latitude: 51.5002,
            longitude: -0.1262,
            url:"http://www.google.co.uk"
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Peking",
            latitude: 39.9056,
            longitude: 116.3958
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "New Delhi",
            latitude: 28.6353,
            longitude: 77.2250
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Tokyo",
            latitude: 35.6785,
            longitude: 139.6823,
            url:"http://www.google.co.jp"
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Ankara",
            latitude: 39.9439,
            longitude: 32.8560
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Buenos Aires",
            latitude: -34.6118,
            longitude: -58.4173
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Brasilia",
            latitude: -15.7801,
            longitude: -47.9292
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Ottawa",
            latitude: 45.4235,
            longitude: -75.6979
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Washington",
            latitude: 38.8921,
            longitude: -77.0241
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Kinshasa",
            latitude: -4.3369,
            longitude: 15.3271
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Cairo",
            latitude: 30.0571,
            longitude: 31.2272
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Pretoria",
            latitude: -25.7463,
            longitude: 28.1876
        }]
    }
});
// 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
        image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
        image.externalElement.style.left = map.longitudeToX(image.longitude) + '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).tooltip({});
    
    return holder;
}

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#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: 5px solid #f7f14c;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #716f42;
  z-index: 10;
  position: absolute;
}
.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;
}
@-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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>