AmCharts 地图 - 插入 html

Question

我正在尝试在 AmCharts 地图上的某个点上创建脉冲效果。为此，我需要在纬度和经度点插入 HTML，但无法通过 api (http://docs.amcharts.com/3/javascriptmaps/)

这是我想要达到的效果 - http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle

这是带有 HTML 和 CSS http://jsfiddle.net/9cBXh/2/ 的地图的 jsfiddle

// request #3275 
var dataPoints = [{
          latitude: '51.000000000000',
          longitude: '9.000000000000',
          type: 'bubble',
          color: '#cc0000',

          fixedSize: false,
          alpha: 0.9,
          height: 30,
          width: 30,
          centered: true,
          id: 'test'
  }];

AmCharts.ready(function() {
    // create AmMap object
    var map = new AmCharts.AmMap();
    // set path to images
    map.pathToImages = "http://www.ammap.com/lib/images/";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap:false,
        images: dataPoints
    }; 

    // pass data provider to the map object
    map.dataProvider = dataProvider;

    map.areasSettings = {
        autoZoom: true,
        selectedColor: "#CC0000"
    };

    // write the map to container div
    map.write("mapdiv");               

});

红点是通过api生成的气泡。蓝点和圆圈是我需要在经纬度坐标处插入的 html……不知何故！

任何帮助将不胜感激。

Answer 1

这是一个完整的 AmCharts 地图示例，其中包含几个脉动的 HTML 元素作为地图标记：

http://www.amcharts.com/demos/custom-html-elements-map-markers/

（您可以通过单击编辑按钮查看源代码）

思路很简单：

捕获“positionChanged”事件。浏览地图 dataProvider 中的所有“图像”，为每个图像创建 HTML 元素，然后使用将经度/纬度坐标解析为屏幕顶部/左侧坐标的 API 函数将它们直接放置在地图上：

// 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';

    // 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);

    return holder;
}